vue+element下拉树选择器

效果图

组件vue

<!-- 树状选择器 -->
<template>
  <el-select v-model="labelModel" :size='treeSize' placeholder="请选择" multiple >
    <el-option :value="labelModel" style="height: auto">
        <el-tree :data="data" default-expand-all show-checkbox  node-key="id"
            ref="tree" highlight-current :props="defaultProps"
            @check-change="handleCheckChange"></el-tree>
    </el-option>
 </el-select>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    value: String,// 接收绑定参数
    size: String, // 输入框宽度
    options: {// 选项数据
      type: Array,
      required: true,
    },
    placeholder: {// 输入框占位符
      type: String,
      required: false,
      default: '请选择',
    },
  },
  computed: {
    // 若非树状结构，则转化为树状结构数据
    data() {
      return this.options;
    },
    treeSize(){
        return this.size||'small'
    }
  },
  watch: {},
  data() {
    return {
      // 输入框显示值
      labelModel: '',
      // 实际请求传值
      valueModel: '0',
      defaultProps: {
        children: "children",
        label: "label",
        value:'value'
      },
    };
  },
  created() {},
  methods: {
     handleCheckChange(data, checked, node) {
            let res = this.$refs.tree.getCheckedNodes(false, true); //true，1. 是否只是叶子节点 2.选择的时候不包含父节点）
            if (checked) {
                this.$refs.tree.setCheckedNodes([data]);
            }
            let arrLabel = [];
            res.forEach(item => {
                console.log(item)
                if(!item.children){
                    arrLabel.push(item.value);
                }
                
            });
            this.labelModel = arrLabel;
             console.log(arrLabel, 'arrLabel')
        },
  }
};
</script>

<style>
  .el-input.el-input--suffix {
    cursor: pointer;
    overflow: hidden;
  }
  .el-input.el-input--suffix.rotate .el-input__suffix {
    transform: rotate(180deg);
  }
  .select-tree {
    max-height: 350px;
    overflow-y: scroll;
  }
  /* 菜单滚动条 */
  .select-tree::-webkit-scrollbar {
    z-index: 11;
    width: 6px;
  }
  .select-tree::-webkit-scrollbar-track,
  .select-tree::-webkit-scrollbar-corner {
    background: #fff;
  }
  .select-tree::-webkit-scrollbar-thumb {
    border-radius: 5px;
    width: 6px;
    background: #b4bccc;
  }
  .select-tree::-webkit-scrollbar-track-piece {
    background: #fff;
    width: 6px;
  }
</style>

使用方法

//引入 1
import seclectTree from '../../components/selectTree'
// 引入2.
components:{
        seclectTree
    },
//使用 3.
 <seclectTree size='small' :options="treedata" v-model="scope.row.menu"></seclectTree>
 //4.data
  treedata: [{label: '1,
          children: [{
            label: '1-1',
            value:'1-1'
          },{
            label: '1-2',
            value:'1-2'
          }]
        }, {
          label: '2',
          children: [{
            label: '2-1',
            value:'2-1'
          }]
        }, {
          label: '3',
           value:'3'
        }],