vue 树形结构组件并实例化

 el-tree 的封装组件

<template>
  <div class="tree-component">
    <el-tree
      ref="tree"
      v-loading="treeLoading"
      :data="treeData"
      node-key="id"
      :props="defaultProps"
      :expand-on-click-node="false"
      :current-node-key="currentNodeKey"
      :default-expanded-keys="defaultExpandedKeys"
      :highlight-current="true"
      :show-checkbox="showCheckbox"
      :check-strictly="checkStrictly"
      :default-checked-keys="defaultCheckedKeys"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
      class="custom-tree"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span v-if="showOperationButtons">
          <el-button
            v-if="showAddButton && node.level === 1"
            type="text"
            size="mini"
            icon="el-icon-plus"
            @click.stop="handleAppend(data)"
          />
          <el-button
            v-if="showEditButton && node.level > 1"
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click.stop="handleEdit(data)"
          />
          <el-button
            v-if="showDeleteButton && node.level > 1"
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click.stop="handleRemove(node, data)"
          />
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    // 树形数据
    treeData: {
      type: Array,
      default: () => []
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 默认属性配置
    defaultProps: {
      type: Object,
      default: () => ({
        children: 'children',
        label: 'label'
      })
    },
    // 默认展开的节点键
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    // 当前选中节点
    currentNodeKey: {
      type: [String, Number],
      default: null
    },
    // 是否显示操作按钮组
    showOperationButtons: {
      type: Boolean,
      default: true
    },
    // 是否显示添加按钮
    showAddButton: {
      type: Boolean,
      default: true
    },
    // 是否显示编辑按钮
    showEditButton: {
      type: Boolean,
      default: true
    },
    // 是否显示删除按钮
    showDeleteButton: {
      type: Boolean,
      default: true
    },
    // 是否显示复选框(多选功能) - 默认开启
    showCheckbox: {
      type: Boolean,
      default: false
    },
    // 父子节点是否关联 - 默认不关联
    checkStrictly: {
      type: Boolean,
      default: true
    },
    // 默认选中的节点
    defaultCheckedKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      treeLoading: this.loading // 组件内部加载状态
    }
  },
  watch: {
    // 监听外部加载状态变化
    loading(val) {
      this.treeLoading = val
    },
    // 监听树形数据变化
    treeData(val) {
      // 数据变化处理
    },
    // 监听当前选中节点变化
    currentNodeKey(val) {
      this.$nextTick(() => {
        if (val) {
          this.$refs.tree.setCurrentKey(val)
        }
      })
    },
    // 监听默认选中节点变化
    defaultCheckedKeys(val) {
      this.$nextTick(() => {
        if (this.showCheckbox == true && val && val.length > 0) {
          this.$refs.tree.setCheckedKeys(val)
        }
      })
    }
  },
  methods: {
    // 节点点击事件处理
    handleNodeClick(data, node) {
      // 更新当前选中节点
      this.$emit('update:currentNodeKey', data.id)
      // 触发自定义节点点击事件
      this.$emit('node-click', data, node)
    },
    // 复选框状态变化事件
    handleCheckChange(data, checked, indeterminate) {
      this.$emit('check-change', data, checked, indeterminate)
    },
    // 添加节点事件处理
    handleAppend(data) {
      // 触发添加节点事件
      this.$emit('append', data)
    },
    // 编辑节点事件处理
    handleEdit(data) {
      // 触发编辑节点事件
      this.$emit('edit', data)
    },
    // 删除节点事件处理
    handleRemove(node, data) {
      // 触发删除节点事件
      this.$emit('remove', node, data)
    },
    // 获取当前选中节点
    getCurrentNode() {
      return this.$refs.tree.currentNode
    },
    // 展开指定节点
    expandNode(nodeKey, expand = true) {
      this.$refs.tree.toggleExpand(nodeKey, expand)
    },
    // 获取所有选中的节点
    getCheckedNodes(leafOnly = false) {
      return this.$refs.tree.getCheckedNodes(leafOnly)
    },
    // 获取所有选中节点的keys
    getCheckedKeys(leafOnly = false) {
      return this.$refs.tree.getCheckedKeys(leafOnly)
    },
    // 设置节点选中状态
    setCheckedKeys(keys, leafOnly = false) {
      this.$refs.tree.setCheckedKeys(keys, leafOnly)
    },
    // 重置所有节点的选中状态
    clearChecked() {
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style scoped>
.tree-component {
  padding: 20px;
  /* width: 300px; */
  margin-right: 20px;
  height: calc(80vh - 200px);
  overflow: auto;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2px 0;
  border-radius: 4px;
}

/* 调整节点内容的内边距 */
.custom-tree .el-tree-node__content {
  height: 32px;
  line-height: 32px;
}

/* 调整按钮样式 */
.custom-tree .el-button {
  padding: 0 5px;
}

/* 调整复选框样式 */
.custom-tree .el-checkbox__inner {
  width: 16px;
  height: 16px;
}

.custom-tree .el-checkbox__input.is-checked .el-checkbox__inner, 
.custom-tree .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1890ff;
  border-color: #1890ff;
}
</style>

 

data 数据

nodeKey: 'id',
      expandOnClickNode: false,
      currentNodeKey: null,
      defaultExpandedKeys: [],
      highlightCurrent: true,
      showCheckbox: true,
      showOperationButtons: true,
      showAddButton: false,
      showEditButton: false,
      showDeleteButton: false,
treeData: [
        {
          id: 1,
          typeName: '分类',
          children: []
        },
        {
          id: 2,
          typeName: '分类',
          children: []
        }
      ],
treeLoading: false,

 

 

组件实例化

<Tree
          ref="tree"

            :tree-data="treeData"

            :node-key="nodeKey"

            :default-props="defaultProps"

            :expand-on-click-node="expandOnClickNode"

            :current-node-key="currentNodeKey"

            :default-expanded-keys="defaultExpandedKeys"

            :highlight-current="highlightCurrent"

            :show-checkbox="false" //下面的可以直接写成 false 来调整，不需要额外写属性

            :show-operation-buttons="showOperationButtons"

            :show-add-button="showAddButton"

            :show-edit-button="showEditButton"

            :show-delete-button="showDeleteButton"

          @node-click="nodeClick"
          @append="append" //这是操作方法，可以删除
          @edit="editBtn"//这是操作方法，可以删除
          @remove="remove"//这是操作方法，可以删除
        />

 

组件实例化方法

// 点击树节点
    nodeClick(data, node) {
//这里处理数据逻辑,获取数据
    },