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':