element二次封装下拉树组件

组件

<template>
    <el-select class="main-select-tree"
               ref="selectTree"
               v-model="newValue"
               v-bind="$attrs"
               clearable
               :disabled="disabled"
               :popper-class="popperClass"
               :filterable="filterable"
               :filter-method="filterMethod"
               :multiple="multiple"
               @change="handleChange">
      <el-option v-for="item in formatData" :key="item.value" :label="item.label" :value="item.value" style="display: none;" />
      <div>
        <tree class="main-select-el-tree"
                 ref="tree"
                 v-bind="$attrs"
                 v-on="$listeners"
                 default-expand-all
                 highlight-current
                 :data="data"
                 :check-strictly="checkStrictly"
                 :show-checkbox="showCheckbox"
                 :node-key="nodeKey"
                 :props="defaultProps"
                 :filter-node-method="filterNode"
                 :current-node-key="currentNodeKey"
                 :expand-on-click-node="expandOnClickNode"
                 @node-click="handleNodeClick"
                 @check="handleCheck"/>
      </div>
      <el-button v-if="multiple" style="position: absolute; bottom: 10px; right: 10px" @click="handleConfirm">确定</el-button>
    </el-select>
</template>

<script>
import {Tree} from 'element-ui';
export default {

  name: 'x-select-tree',
  components: {Tree},
  props: {
    popperClass: {
      type: String,
      default: 'selectTree'
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    parentSelect: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        };
      }
    },
    value: {
      type: [String, Array, Number],
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    showCheckbox() {
      return this.multiple;
    },
    // 四级菜单
    formatData() {
      const data = JSON.parse(JSON.stringify(this.data));
      const options = [];
      data.forEach((item) => {
        options.push({label: item[this.defaultProps.label], value: item[this.nodeKey]});
        if (item.children) {
          item.children.forEach((items) => {
            options.push({label: items[this.defaultProps.label], value: items[this.nodeKey]});
            if (items.children) {
              items.children.forEach((itemss) => {
                options.push({label: itemss[this.defaultProps.label], value: itemss[this.nodeKey]});
                if (itemss.children) {
                  itemss.children.forEach((itemsss) => {
                    options.push({label: itemsss[this.defaultProps.label], value: itemsss[this.nodeKey]});
                  });
                }
              });
            }
          });
        }
      });
      return options;
    }
  },
  data() {
    return {
      newValue: [],
      currentNodeKey: '',
      expandOnClickNode: true
    };
  },
  watch: {
    value(val) {
      this.newValue = val;
      if (this.multiple) {
        if (val) {
          this.$refs.tree.setCheckedKeys(typeof val !== 'object' ? (val + '').split(',') : val, true);
        }
      } else {
        this.$refs.tree.setCurrentKey(this.newValue || null);
      }
    }
  },
  methods: {
    filterMethod(value) {
      this.$refs.tree.filter(value);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    change (data) {
      this.$emit('change', data);
    },
    handleNodeClick(node) {
      if (this.multiple) return;
      if (!this.parentSelect && node.children?.length) return;
      this.newValue = node[this.nodeKey];
      this.$emit('change', this.newValue);
      this.$refs.selectTree.blur();
    },
    handleCheck(data, data1) {
      const arr = data1.checkedNodes;
      this.setNewValue(arr);
    },
    handleConfirm() {
      const arr = this.$refs.tree.getCheckedNodes();
      this.setNewValue(arr);
      this.$refs.selectTree.blur();
    },
    setNewValue(arr) {
      this.newValue = [];
      arr.forEach(item => {
        if (!this.parentSelect) {
          if (!item.children?.length) {
            this.newValue.push(item[this.nodeKey]);
          }
        } else {
          this.newValue.push(item[this.nodeKey]);
        }
      });
      this.$emit('change', this.newValue);
    },
    handleChange() {
      this.$nextTick(() => {
        // this.newValue && this.$refs.tree.setCheckedKeys(this.newValue, true);
        this.$emit('change', this.newValue);
      });
    }
  }
};
</script>

<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
.selectTree{
  width: 300px;
}
</style>

调用

<template>
  <x-select-tree :data="data"
                 :parentSelect="parentSelect"
                 @change="change"
                 :multiple="multiple"></x-select-tree>
</template>

<script>
// import { XSelectTree } from '@newpearl/ui';
import XSelectTree from '../../lib/packages/x-select-tree/x-select-tree';
export default {
  name: 'select-tree',
  components: {XSelectTree},
  data() {
    return {
      parentSelect: false,
      multiple: true,
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]
    };
  },
  methods: {
    change(data) {
      console.log(data);
    }
  }
};
</script>

<style scoped>

</style>