element-ui 树形选择器，多选添加全部、单选、自定义显示内容以及设置初始值

---

前言

树形选择器是将element中的el-select与el-tree结合起来，也可以将el-popover和le-tree结合起来，将下拉框的内容变为树形的数据，这里的选择都是用的复选框，即使是单选。树形选择器中el-select与el-tree的方式会比较麻烦一些，因为复选框和选择框内容要同步，有两种方式一个是根据e-select的change事件（这个是选中值发生变化时触发，我选择的是这个），一个是根据remove-tag事件（这是移除一个就会调用）

---

1.el-popover和le-tree，自定义显示的内容

<el-popover :width="300"
                          placement="bottom"   //出现位置
                          // 弹出的动作
                          trigger="click">
                          // 这是筛选树形数据，会显示在弹出框内
                <el-input v-model.trim="filterText" placeholder="请输入关键字" clearable></el-input>
                <el-tree ref="tree"
                         height="260px"
                         :data="treeData"
                         multiple="true"
                         show-checkbox="true"
                         check-strictly="true"
                         check-on-click-node="true"
                         default-expand-all='false'
                         :filterText="filterText"
                         :render-content="renderContent"
                         @check="onTreeNodeCheck"
                ></el-tree>
        		// 这个会显示在点击的地方
                <el-input slot="reference"
                          v-model.trim="handleEmpText"
                          placeholder="请选择"
                          readonly></el-input>
              </el-popover>

// 树形选择器的点击事件；form是要提交的，handleEmpText是显示在弹框内的选取的内容
    onTreeNodeCheck(checkedCurNode, checkedAllNodes) {
      let self = this;
      // 选中的所有节点
      self.checkedAllNodes = checkedAllNodes.checkedNodes;
      if (self.checkedAllNodes.length > 0) {
        self.form.id = [];
        let textList = [];
        self.checkedAllNodes.forEach(item => {
        	// 判断选取的节点
          if (item.selected) {
            self.form.id.push(item.id);   
            textList.push(item.text);
          }
        });
        self.handleEmpText = textList.join("、");
        self.form.name = textList
      } else {
        self.handleEmpText = "";
        self.form.name = []
        self.form.id = [];
      }
    },

 // 自定义的内容-----写在函数里面
        renderContent(h, { node, data, store }) {
        // 判断是否需要添加icon ，例如一级不需要，只有三级需要，那就可以写，node.level==3，这是指树形结构的等级
            if (data.select){
                return (
                  <span class="custom-tree-node">
                  <span class="self-tree" >
                      <span>{node.label}</span>
                      // 三元表达式，添加icon和点击事件
              <i class={data.add?'el-icon-minus':'el-icon-plus'}
              on-click={data.add?($event) => this.remove(data,$event):($event) => this.add(data,$event)}></i>
                  </span>
                  </span>);
              
            }else {
              return (
                <span class="custom-tree-node chang-tree-node">
                <span>
                  {node.label}
                </span>
              </span>);
          }
          

        },
      remove(data,event){
          let self = this
        event.stopPropagation();   // 阻止父级的选择事件
        // console.log('删除')
      },
      add(data,event){
        let self = this
        event.stopPropagation();
         // console.log('添加')
      }
 // 自定义的内容-----写在html里面
<span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button size="mini" @click="() => add(data，$event)">新增</el-button>
              <el-button size="mini" @click="() => remove(data，$event)">删除</el-button>
            </span>
          </span>

2.el-select与el-tree，多选添加全部以及设置初始值

<el-select ref="select"
             style="width: 100%"
             v-bind="$attrs"
             v-model="selectData"
             :multiple="multiple"
             collapse-tags
             @visible-change='onVisibleChange'
             @change="onChange"
             @remove-tag="onRemoveTag">
    <el-option style="display: none"
               v-for="item in options"
               :key="item.id"
               :label="item.text"
               :value="item.id"></el-option>
    <el-tree ref="tree"
             :data="treeData"
             node-key="id"
             :props="props"
             :default-expand-all="true"
             :expand-on-click-node="false"
             :show-checkbox="multiple"
             highlight-current
             @node-click="onTreeNodeClick"
             @check="onTreeNodeCheck"></el-tree>
  </el-select>



// 下拉框多选
    onTreeNodeCheck(checkedCurData, checkedAllData) {
      let self = this;
      let checkedAllNodes = checkedAllData.checkedNodes;
      let array = [];
      // console.log(checkedAllData)
      if (checkedCurData.id == '') {
      // 这是全选按钮，是否选择
        self.checkedFlag = !self.checkedFlag;
        if (self.checkedFlag) {
        //  全选按钮被选择之后，select中的选择框的内容的数据和树形数据的复选框的处理
          self.checkedList = 这里是树形中所有的被选择元素的名字
          self.$refs.tree.setCheckedKeys(这里是树形中所有的被选择元素的id)
        } else {
        //  全选按钮被取消之后，清空select中的选择框的内容的数据和树形数据的复选框
          self.checkedList = []
          self.$refs.tree.setCheckedKeys([])
        }
        // console.log(self.checkedList)
      } else {
      // 这是将选中的按钮都把名字显示在复选框中  self.$emit('input', array);这样也是可以的
        checkedAllNodes.forEach(item => {
          array.push(item.name);
        });
        self.checkedList = array
        self.checkedAllNodes = checkedAllNodes
        self.$refs.tree.setCheckedKeys(checkedAllData.checkedKeys)
      }
      self.$emit('nodeCheck', checkedCurData, checkedAllData);
    },
    // 下拉框多选发生变化时  这是根据下拉框里面内容的变化而改变树形复选框是否被选中的；也可使用onRemoveTag这个方法，每删除一个下拉框中的标签，便会触发，可以借此吧树形复选框的选中取消;同时还需要把数据与父组件同步；val是删除之后的数组
    onChange(val) {
      let self = this;
      // console.log(val)
     let checkedAll = []
      let curDetale = {id:''}
      let nodeChecked = {checkedNodes:[]}
      if (val.length >= 0) {
        val.map(i => {
          self.checkedAllNodes.map(j => {
            if (j.name == i) {
          	 curDetale = j 
              nodeChecked.checkedNodes.push(j)
              checkedAll.push(j.id)
            }
          })
        })
      }
      // console.log(checkedAll)
      self.$refs.tree.setCheckedKeys(checkedAll)
      self.$emit('nodeCheck', curDetale, nodeChecked);
    },
    // 这是el-select中监听，下拉框是否出现的方法，由于再点击下拉框之前，其内容的dom是不存在的所以这个时候的初始化的数据并没有渲染到复选框上，所以需要在内容出现的时候再传值，进行渲染
onVisibleChange(val){
      this.$emit('visibleChange', val);
    }

// 这个需要监听一下，选中的名字同步到下拉框的选择框中
checkedList() {
      this.selectData = this.checkedList;
    }
    // 监听传过来的初始化的值
currentNode: {
      immediate:true,
      handler(newValue, oldValue) {
        let node = {checkedNodes:[newValue],checkedKeys:[newValue.id]}
        this.onTreeNodeCheck(newValue,node)
      },
    }

// 这是调用树形选择器的方法，nodeCheck
// 获取数据
    getTreeData() {
      let self = this;
      self.$http.get(url).then(result => {
        if (result.success) {
          let resultData = result.result
          resultData.unshift({id:'',name:'全部',childList:[]})
          self.treeData = resultData
			
         self.visibleChange(true)
         // 这是造数据，调用选择事件，这样筛选出来的内容就是初始值的数据
          let node = {
            checkedNodes: [self.treeCurrentNode],
            checkedKeys: [self.treeCurrentNode.id]
          }
          self.nodeCheck(self.treeCurrentNode, node)
        } else {
          self.$message.error('数据加载失败！');
        }
      });
    },
    // 复选框的选择事件
    nodeCheck(currentNode, node) {
      let self = this
      console.log(currentNode, node)
      let array = []
      let checkedAllNodes = node.checkedNodes
      if (currentNode && checkedAllNodes.length > 0) {
        checkedAllNodes.forEach(item => {
          array.push(item.id);
        });
      } else {
        array = []
      }
      console.log(array)
    },
    visibleChange(val) {
      let self = this
      if (val) {
        let curNode = self.$store.state.treeList.map(i => {
          let obj = {}
          obj.id = i.id
          obj.name = i.name
          obj.childList = i.children
          return obj
        })
        self.treeCurrentNode = curNode[0]
      }
    },

3.el-select与el-tree，单选

<el-select ref="select"
             style="width: 100%"
             v-bind="$attrs"
             v-model="selectData"
             multiple="false"
             collapse-tags
             @change="onChange"
             @remove-tag="onRemoveTag">
    <el-option style="display: none"
               v-for="item in options"
               :key="item.id"
               :label="item.text"
               :value="item.id"></el-option>
    <el-tree ref="tree"
             :data="treeData"
             node-key="id"
             :props="props"
             :default-expand-all="true"
             :expand-on-click-node="false"
             :show-checkbox="multiple"
             highlight-current
             @node-click="onTreeNodeClick"
             @check="onTreeNodeCheck"></el-tree>
  </el-select>



// 下拉框单选
    onTreeNodeCheck(checkedCurData, checkedAllData) {
      let self = this;
      self.checked = checkedCurData
      self.$refs.tree.setCheckedKeys([checkedCurData.id])
      // 没有选择任何数据，和选择之后又取消了
      if (checkedAllData.checkedKeys.length == 0 ||
        checkedAllData.checkedKeys.indexOf(checkedCurData.id) == -1) {
        self.checked = {}
        self.$refs.tree.setCheckedKeys([])
      }
      self.$emit('nodeCheck', checkedCurData, checkedAllData);
    },
    
    onChange(val) {
      let self = this;
      // console.log(val)
      if (val.length == 0) {
       self.$refs.tree.setCheckedKeys([])
      }
    },


// 这个需要监听一下，选中的名字同步到下拉框的选择框中
value() {
      this.selectData = this.checked.name;
    }


// 这是调用树形选择器的方法，nodeCheck
// 获取数据
    getTreeData() {
      let self = this;
      self.$http.get(url).then(result => {
        if (result.success) {
          let resultData = result.result
          resultData.unshift({id:'',name:'全部',childList:[]})
          self.treeData = resultData
          //  可以设置默认值
          this.$nextTick(() => {
            self.nodeCheck('', '')
          })
        } else {
          self.$message.error('数据加载失败！');
        }
      });
    },
    // 复选框的选择事件
    nodeCheck(currentNode, node) {
      let self = this
      if (currentNode && node.checkedKeys.length > 0) {
         // 选择的数据是currentNode
       } else {
        
       }
    },

树形复选框的样式

有子级的时候，没有复选框，添加属性popper-class=‘treeStyle’
.treeStyle .el-tree-node__content {
height: 0.966666rem;
margin-top: 0.3rem;
}
.treeStyle .el-tree-node__label {
text-align: left;
white-space: normal;
}
.treeStyle .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__input> .el-checkbox__inner{
display: inline-block;
}
.treeStyle .el-tree .el-tree-node .el-checkbox__input> .el-checkbox__inner{
display: none;
}