iview modal 弹框里面 套用 element table表格并且可以多选，解决回显的坑

先上效果图：

 点击详情和编辑的时候，modal框打开，table表格数据回显问题：

 

那么想要实现table的多选框回显，前提得有多选框，而实现回显也主要有依赖多选框自带的几个事件，当表格存在多选框时这几个事件便可以生效：

              <FormItem label="角色权限:" prop="roleRight">
                <el-card>
                  <el-table ref="mainTable" :data="tableData" height="300" @selection-change="check_changeHandle">
                    <el-table-column type="selection" width="60" align="center"></el-table-column>
                    <el-table-column type="index" label="权限序号" align="left" width="160">
                    </el-table-column>
                    <el-table-column prop="itemName" label="权限名称" align="left">
                    </el-table-column>
                  </el-table>
                </el-card>
              </FormItem>

elementUI table的多选框是双向切换状态，即点击勾选，再点击取消勾选，所以要实现回显功能，首先应该判断多选框当前的状态，默认的select事件会携带两个参数，selection即当前勾选的所有数据的集合（数组），row即当前行的数据，重要代码如下：

//更改选择的书籍信息
      check_changeHandle(val,index) {
        this.mySelect=val;
      },

回显操作（让某一行回显）

   this.$refs.mainTable.toggleRowSelection(row, true); // 回显

 

清除整个表格的回显

  this.$refs.mainTable.clearSelection();  //清除回显

在关闭弹层的时候清空：

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140