skl-admin/admin-frame/src/components/deepTree.vue

<template>
  <el-tree
    :data="treeList"
    :props="defaultProps"
    accordion
    :expand-on-click-node="false"
    node-key="code"
    :default-expand-all="false"
    class="tree"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <el-tooltip v-if="node.label.length > 8" effect="dark" :content="node.label" placement="top-start">
        <span @click="handleNodeClick(node, data)">{{ node.label.slice(0, 5) + '...' }}</span>
      </el-tooltip>
      <span @click="handleNodeClick(node, data)" v-else>{{ node.label }}</span>
      <span v-if="operation">
        <el-button @click="edit(node)" type="text" size="mini" icon="el-icon-edit"></el-button>
        <el-button @click="remove(data)" type="text" size="mini" icon="el-icon-delete"></el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  props: {
    // 控件渲染数据源
    data: { type: Array, default: () => [] },
    // 是否启用修改删除操作
    operation: { type: Boolean, default: false }
  },
  computed: {
    treeList() {
      return this.$tree(this.data) ?? [];
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  mounted() {},
  methods: {
    // 选择事件
    handleNodeClick(node, data) {
      this.$emit('nodeClick', { node, data });
    },
    // 修改事件
    edit(node) {
      this.$emit('edit', node?.data);
    },
    // 删除事件
    remove(data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { type: 'warning' })
        .then(_ => {
          this.$emit('remove', data);
        })
        .catch(_ => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree {
  // background: #f7f7f7;
  ::v-deep .el-tree-node__content {
    // background-color: #f50202 !important;
    // background-colo#ff0000e7e7e7 !important;
    .custom-tree-node {
      color: #006efd;
      font-size: 18px;
      font-weight: 700;
      font-family: '宋体';
      // span {}
    }
  }
  ::v-deep .el-tree-node__children .el-tree-node .el-tree-node__content {
    background-color: #f0f0f0 !important;
    margin: 8px 0 !important;
    padding-left: 0 !important;
    margin-left: 36px !important;
    .custom-tree-node {
      color: #409EFF;
      font-size: 14px;
      font-weight: 600;
      font-family: '宋体';
      // span {}
    }
  }
  ::v-deep .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__content {
    background-color: #f5f8fa !important;
    margin: 8px 0 !important;
    padding-left: 0 !important;
    margin-left: 72px !important;
    .custom-tree-node {
      color: #2ca0ff;
      font-size: 12px;
      font-weight: 500;
      font-family: '宋体';
      // span {}
    }
  }
}

</style>