s-tree 自定义尾部按钮

<template>
  <div class="s-tree">
    <a-tree
      v-model="check"
      :tree-data="treeData"
      :checkable="checkable"
      :selectable="selectable"
      @check="handleCheck"
      @select="handleSelect"
    >
      <template
        slot="custom"
        slot-scope="item"
      >
        <div class="item">
          {{ item.title }}
          <div class="btn-box">
            <!-- 通用组件的权限控制 code 必须保持一致，否则自行 copy 出去自定义 -->
            <a-space>
              <a-icon
                v-action:create
                type="plus"
                @click="handleCreate(item)"
              />
              <a-icon
                v-action:edit
                type="edit"
                @click="handleEdit(item)"
              />
              <a-icon
                v-action:delete
                type="delete"
                @click="handleDelete(item)"
              />
            </a-space>
          </div>
        </div>
      </template>
    </a-tree>
  </div>
</template>

<script>
import T from '@/utils/tools'

export default {
  name: 'STree',
  props: {
    data: {
      type: Array,
      required: true
    },
    replaceFields: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          title: 'title',
          key: 'key'
        }
      }
    },
    checkable: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Boolean,
      default: false,
    }
  },

  data () {
    return {
      check: [],
    }
  },

  computed: {
    treeData () {
      const data = T.cloneDeep(this.data)
      return this.initData(data)
    }
  },

  methods: {
    handleDelete (e) {
      this.$emit('handleDelete', e)
    },

    handleCheck (e) {
      this.$emit('handleCheck', e)
    },

    handleEdit (e) {
      this.$emit('handleEdit', e)
    },

    handleSelect (selectedKeys) {
      this.$emit('handleSelect', selectedKeys)
    },

    handleCreate (e) {
      this.$emit('handleCreate', e)
    },

    initData (arr) {
      return arr.map(item => {
        item.scopedSlots = { title: 'custom' }
        const children = item[this.replaceFields.children]
        if (children && children.length) {
          this.initData(children)
        }
        return item
      })
    }
  }
}
</script>

<style lang="less" scoped>
.s-tree {
  display: inline-block;
}

.item {
  width: 300px;
  text-overflow: ellipsis;
}

.btn-box {
  float: right;
  cursor: auto;

  &:hover i {
    color: #1890ff;
  }
}
</style>