vue项目中使用el-dialog嵌套el-table,复选框回显问题

vue项目中使用el-dialog嵌套el-table,复选框回显问题_第1张图片 

 功能需求:

点击选择单位右侧按钮,弹出弹框,将输入框里的数据,在弹框表格里,默认选中

实现思路:


 在点击弹框的取消和确定按钮的时候,先使用this.$refs.multipleTable.clearSelection()清空所有选择,再隐藏弹框。***必须是在弹框隐藏前调用***

vue项目中使用el-dialog嵌套el-table,复选框回显问题_第2张图片 

然后再watch 变量dialogVisible,弹框出现后,再使用toggleRowSelection切换选中行的选中状态为true

vue项目中使用el-dialog嵌套el-table,复选框回显问题_第3张图片

vue项目中使用el-dialog嵌套el-table,复选框回显问题_第4张图片

 这里使用的select 和 select-all监听用户手动勾选数据行和全选按钮的事件,没有使用selection-change(当选择项发生变化时候触发)
vue项目中使用el-dialog嵌套el-table,复选框回显问题_第5张图片

你可能感兴趣的:(Vue,elementui,vue.js,javascript,前端)