el-select组件包裹el-tree组件实现数据回显

el-select组件包裹el-tree组件实现数据回显

最近做项目要用到下拉框中存放树型结构的数据，在网上找到可以使用el-select包裹el-tree实现，但是总是不能实现数据的回显，用了一天时间，不断尝试，终于成功了,做个笔记，以防遗忘。

以下.json文件都是模拟数据

树型结构数据   student.json

[{
            "id": 1,
            "name": "班干",
            "children": [{
              "id": "a1",
              "name": "潘艺文"
            }, {
              "id": "a2",
              "name": "葛安国"
            }, {
              "id": "a3",
              "name": "曹苗苗"
            }]
          },
          {
            "id": 2,
            "name": "学生",
            "children": [{
              "id": "a4",
              "name": "刘翠翠"
            }, {
              "id": "a5",
              "name": "李婷婷"
            }, {
              "id": "a6",
              "name": "韩梦雪"
            }]
          },
          {
            "id": 3,
            "name": "老师",
            "children": [{
              "id": "a7",
              "name": "朱永忠"
            }, {
              "id": "a8",
              "name": "施璐"
            }, {
              "id": "a9",
              "name": "王伽珞"
            }, {
              "id": "a10",
              "name": "张琳"
            }]
          },
          {
            "id": 4,
            "name": "辅导员",
            "children": [{
              "id": "a7",
              "name": "刁莉莉"
            }]
          },
          {
            "id": 5,
            "name": "其他",
            "children": []
          }
        ]

index.vue

<el-button type="primary" @click="echoData">模拟数据回显</el-button>
          <el-select placeholder="请选择" v-model="currentValue" multiple collapse-tags @change="selectChange">
            <el-option style="height:auto" :value="selectData">
              <el-tree :data="studentTreeData" ref="studentTree" node-key="id" :props="defaultProps"  show-checkbox :check-strictly="true" @check-change="handleCheckChange"></el-tree>
            </el-option>
  </el-select>

以上文件的关键点属性及方法

el-select

multiple 是否多选

collapse-tags 多选时是否按文字的形式展示

selectChange 选中的数据发生改变时触发

 v-model="currentValue"  下拉框中被选中的值  (字符串类型)

el-option

style="height:auto"  设置下拉的高度被内容撑开(不然内容会被遮住)

:value="selectData" 下拉框中的数据 (数组类型)

el-tree

:data="studentTreeData" 属性结构要展现的数据

 node-key="id" 规范节点的唯一性

:props="defaultProps" 规定树型结构要展示哪些内容

show-checkbox 树型结构可选

:check-strictly="true" 父子节点不关联 ，可以用到父节点禁止选中

@check-change="handleCheckChange" 节点选中状态发生变化时的回调

js代码  其中的echo.json表示要回显的数据

<script>
  export default {
    data() {
      return {
        defaultProps: { //树型图配置
          children: "children", //指定子树为节点对象的某个属性值
          label: "name" //指定节点标签为节点对象的某个属性值
        },
        studentTreeData: [],
        currentValue:"",//当前被选中下拉框中的值
        selectData:[],//下拉框中的选项数据
      }
    },
    mounted() {

    },
    methods: {
      // 禁止父节点被点击
      disabledParent(data) {
        data.forEach((node) => {
          if (node.children) {
            node.disabled = true;
            this.disabledParent(node.children)
          } else {
            return
          }
        })
        return data;
      },
      // 下拉框中的数据发生改变
      selectChange(data){
        let arrNew=[];
        let selectLength=this.selectData.length;
        let dataLength=data.length;
        for(let i=0;i<selectLength;i++){
          for(let j=0;j<dataLength;j++){
            if(data[j]===this.selectData[i].name){
              arrNew.push(this.selectData[i])
            }
          }
        }
        this.$refs.studentTree.setCheckedNodes(arrNew);//设置勾选的值

      },
      // 树型结构选项框被点击发生改变
       handleCheckChange(){
         let checkeArr=this.$refs.studentTree.getCheckedNodes(true);//true表示只包含叶子节点
         // this.currentValue=checkeArr;
         // console.log(checkeArr)
         let arrLabel=[];
         let arr=[];
         checkeArr.forEach((item,index)=>{
           arrLabel.push(item.name);
           arr.push(item)
         })
         this.currentValue=arrLabel; //select
         this.selectData=arr; // option
      },
      // 点击回显数据
      echoData(){
          this.$http.get("http://localhost:3000/public/echo.json").then(res => {
            console.log(res.data)
            var arr=[]
            res.data.forEach(item=>{
              arr.push(item.name)
            })
           // arr=arr.join(",")
            setTimeout(()=>{
              res.data.forEach(item=>{
                this.$refs.studentTree.setChecked(item,true)
                this.currentValue=res.data;
                this.selectData=arr;
              },500)
            })
          })
      }

    }
  };
</script>

 需要回显的数据 echo.json

[{
    "id": "a1",
    "name": "潘艺文"
}, {
    "id": "a2",
    "name": "葛安国"
}, {
    "id": "a3",
    "name": "曹苗苗"
}, {
    "id": "a4",
    "name": "刘翠翠"
}, {
    "id": "a5",
    "name": "李婷婷"
}, {
    "id": "a6",
    "name": "韩梦雪"
}]