el-tree实现回选

html部分

<el-tree
    ref="tree"
    :data="options"    // 数据源
    :props="treeProps"    // 将要遵循的数据格式
    :default-checked-keys="checkedKeys"    // 已选中的数据id/id组
    node-key="id"    // 设置的标识，和default-checked-keys要呼应起来
    show-checkbox    // 显示选中框
    @check-change="handleCheckChange"    // 修改选中的数据
>
</el-tree>
<el-button @click="changeEquiement(scope.row)" type="text" size="small">回显</el-button>

js部分

data(){
    return{
        options: [],
        //根据后端提供的数据格式及所想回显的字段做修改
        treeProps: {
           children: "children",
           label: "deviceGroup",
        },
        checkedKeys: [],
    }
},
methods:{
    // 获取树形结构
    getTreeWithProject({ projectNo:this.projectNo}).then(res => {
       if (res.code == 200) {
          this.options = res.data
       }
    }),
    // 点击回显，回选已选中的数据
    changeEquiement(e){
        this.checkedKeys = e.monitorIds  // 后端返回已选中数据的id
    },
    // 修改已选中的数据
    handleCheckChange(){
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      this.monitorDevice = checkedNodes.map(e=>{
        return e.id
      })
    },
}