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-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表示要回显的数据

 需要回显的数据 echo.json

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