element-plus中tree的简单使用

记录一下，方便下次使用

演示

前言

包含

1. tree展开按钮的替换
2. 文字前的图标
3. 文件之间的连线
4. 文字后面操作按钮不同层级的控制

整体代码

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: () => '-1'
  },
  data: {
    type: Array,
    default: () => []
  },
  filterText: {
    type: String,
    default: ''
  },
  defaultProps: {
    type: Object,
    default: () => ({
      label: 'label',
      children: 'children'
    })
  },
  lableIconlist: {
    type: Array,
    default: () => []
  },
  behindList: {
    type: Array,
    default: () => []
  },
  efault_expand_all: {
    type: Boolean,
    default: () => false
  },
  default_expanded_keys: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:modelValue', 'alterationBehindList', 'behindChange'])
const treeRef = ref(null)

const toggleChild = (node) => {
  node.expanded = !node.expanded
}
const operate = (data, node) => {
  emit('behindChange', data, node)
}
// 点击时是否根据节点内容改变树形下拉菜单
const alterationDropdownList = (node) => {
  emit('alterationBehindList', node)
}
//监听父组件传过来的过滤文本
watch(
  () => props.filterText,
  (val) => {
    treeRef.value?.filter(val)
  }
)
//节点过滤
const filterNode = (value, data) => {
  if (!value) return true
  return data[props.defaultProps.label].includes(value)
}
</script>

<template>
  <div class="tree_wrapper tree-container">
    <el-tree
      class="elTreeClass"
      ref="