vue使用el-select、el-tree封装 下拉树

子组件代码

<template>
  <div>
    <el-select @visible-change="selectClose" v-model="modelValueLabel" :filter-method="selectFilterMethod"
               style="min-width: 180px;" :size="size" :placeholder="placeholderText" :filterable="isFilter" multiple
               :collapse-tags="isTag"
               @change="selectChangeMethod">
      <el-option :value="modelValue" style="height: auto;padding: 0;">
        <el-tree  :data="treeData" :default-expand-all="isDefaultAll" :expand-on-click-node="false"
                 :filter-node-method="filterNode" show-checkbox
                 :check-strictly="true" node-key="id" ref="demoTree" highlight-current
                 :props="defaultProps"
                 @check-change="handleCheckChange"></el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "index",
  props:{
    // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
    echoObj:{},
    isFilter:{  // 是否开启搜索
      default:true
    },
    size:{ // 尺寸
      default:'mini'
    },
    placeholderText:{  // 提示文字
      default:'请选择...'
    },
    isTag:{  // 是否已tag标签展示
      default:true
    },
    isDefaultAll:{ // 是否默认展开全部
      default:true,
    },
    expandClickNode:{ // 点击节点是否展开
      default:false
    },
    fieldName:'', // 字段key，用于取出数据中的名字
    fieldId:'', // 字段key， 数据中的id
    treeData:'',  // 数据
    defaultProps: {     // 遍历时字段格式化
      default: {
        children: 'children',
        label: 'label'
      }
    },
    isSingleChoice:{ // 是否单选
      default:false
    }

  },
  data() {
    return {
      // 声明数据
      modelValue:[], // 实际选中值
      modelValueLabel:[], // 下拉框绑定值(选中值名字)
    }
  },
  methods: {
    // 方法
    /**
      @description:下拉框打开时，还原搜索数据
      @auth:Sky（孙雨琪）
      @time: 2021-03-29 09:20:48
    **/
    selectClose(bool){
      if(bool){
        this.selectFilterMethod('')
      }
    },
    /**
      @description:自定义筛选方法
      @auth:Sky（孙雨琪）
      @time: 2021-03-26 16:38:39
    **/
    selectFilterMethod(val) {
      // 下拉框调用tree树筛选
      this.$refs.demoTree.filter(val);
    },
    /**
      @description:select框值改变时候触发的事件
      @auth:Sky（孙雨琪）
      @time: 2021-03-26 16:44:24
    **/
    selectChangeMethod(e) {
      let arrNew = [];
      let dataLength = this.modelValue.length;
      let eLength = e.length;
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eLength; j++) {
          if (e[j] === eval('this.modelValue[i].'+this.fieldName)) {
            arrNew.push(this.modelValue[i])
          }
        }
      }
      this.$refs.demoTree.setCheckedNodes(arrNew);//设置勾选的值
    },
    /**
      @description:树筛选
      @auth:Sky（孙雨琪）
      @time: 2021-03-26 16:46:06
    **/
    filterNode(value, data) {
      if (!value) return true;
      return eval('data.'+this.fieldName).indexOf(value) !== -1;
    },

    /**
      @description:进行绑定选中树后下拉绑定
      @auth:Sky（孙雨琪）
      @time: 2021-03-26 16:52:38
    **/
    handleCheckChange(data,checkd,node) {
      if(this.isSingleChoice){
        if(checkd){
          this.$refs.demoTree.setCheckedNodes([data]);
        }
      }

      let res = this.$refs.demoTree.getCheckedNodes(false, false); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      let arrLabel = [];
      let arr = [];
      res.forEach(element => {
        arrLabel.push(eval('element.'+this.fieldName));
        arr.push(element);
      });
      this.modelValue = arr;
      this.modelValueLabel = arrLabel
      if(this.isSingleChoice) {
        if(arr.length === 1){
          this.$emit('callBackFunc',arr)
        }
      }else{
        this.$emit('callBackFunc',arr)
      }
    },
  },
  mounted() {
    // selectTree下拉树
    // 组件当前版本version：2.0
    // 更新时间：2021-03-31 15:38:17
    // 作者：sky（孙雨琪）
    if(this.echoObj){
      if(this.echoObj.length > 0){
        let ids = []
        let names = []
        for (let i = 0; i< this.echoObj.length;i++){
          ids.push(eval('this.echoObj[i].'+this.fieldId))
          names.push(eval('this.echoObj[i].'+this.fieldName))
          this.modelValue.push(this.echoObj[i])
        }
        this.modelValueLabel = names
        this.$nextTick(() => {
          this.$refs.demoTree.setCheckedKeys(ids);
        })
      }
    }

  },
  created() {
    // 页面未渲染时加载
  }
}
</script>

<style scoped>

</style>

父组件代码

1.使用引入组件

	import treeSelect from '@/components/selectTree'
	
2.使用components注册组件

	components:{
	  treeSelect
	}
	
3.data中声明组件所需数据
	 // 用户回显（当没有回显时，不传该参数即可）
      value:[
        {
          id:1.11,
          name:'一级-1-1',
          children:[],
        },
        {
          id:1.15,
          name:'一级-1-5',
          children:[],
        }
      ],
      colName:'name', // 字段对应name
      colId:'id', // 字段对应id
      // 遍历时格式化
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 数据
      tree:[
        {
          id:1,
          name:'一级',
          children:[
            {
              id:1.1,
              name:'一级-1',
              children:[
                {
                  id:1.11,
                  name:'一级-1-1',
                  children:[],
                },
                {
                  id:1.12,
                  name:'一级-1-2',
                  children:[],
                },
                {
                  id:1.13,
                  name:'一级-1-3',
                  children:[],
                },
                {
                  id:1.14,
                  name:'一级-1-4',
                  children:[],
                },
                {
                  id:1.15,
                  name:'一级-1-5',
                  children:[],
                },
              ],
            },
            {
              id:1.2,
              name:'一级-2',
              children:[],
            },
            {
              id:1.3,
              name:'一级-3',
              children:[],
            }
          ]
        }
      ]

4.使用组件

    <tree-select @callBackFunc="demoCallBack" :echoObj="value" :fieldName="colName" :fieldId="colId" :treeData="tree" :defaultProps="defaultProps" :isSingleChoice="false"></tree-select>

5.methods中声明方法接收子组件传来对应选中的值
	// 回调 取出数据
    demoCallBack(data){
      // 此时data中为选中的数据（是一个数组）
      console.log(data)
    }

注：此文章用于记录学习，本人也是前端小白

  当前组件可能会有功能未完善，欢迎反馈	
  邮箱：1312003804@qq.com