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>