Vue tree自定义事件注意点

<template>
  <div id="Tree_ElementTree" style="height: 100%;">
    <el-tree
      :data="data"
      :props="defaultProps"
      highlight-current
      lazy
      :load="loadNode"
      :show-checkbox="showCheckbox"
      :style="style"
      :node-key="nodeId"
      :default-expanded-keys=" []"
      :default-expand-all=" false"
      @node-click="handleNodeClick"
      @check="handleCheck"
    >
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click.stop="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click.stop="() => remove(node, data)">
            Delete（这样点击的时候，就不会触发点击节点的事件）
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
 
<script>
 
export default {
  name: "Tree_ElementTree",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  props: {
    componentJson: {
      type: Object,
      require: true
    }
  },
  created() {},
  components: {},
  mounted() {
 
  },
  computed: {},
  watch: {},
  methods: {
  }
};
</script>
 
<style scoped>
</style>
<style>
　　/*添加滚动条的解决办法*/

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .el-tree{
        width:100%;
        overflow-x: scroll;
    }
    .el-tree> .el-tree-node{
        min-width: 100%;
        display:inline-block !important;
    }
</style>