使用Elment UI 的 table 组件时 多选框(type = "selection") 需要实现勾选和状态同步的功能, 所以第一次进入表格时需要默认选中,
1 <el-table 2 :data="tableData" 3 border 4 style="width: 100%" 5 height="600" 6 ref="table" 7 row-key="id" 8 @select="handleSelect" 9 @select-all="handleSelectAll" 10 @selection-change="handleSelectionChange"> 11 <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column> 12 13 </el-table>
:reserve-selection="true" 文档地址
仅对 type=selection 的列有效,类型为 Boolean,为 true 则代表会保留之前数据的选项,需要配合 Table 的 clearSelection 方法使用。
设置此属性后 row-key 这个属性也是必须的
this.$refs.table.toggleRowSelection(item,true);
toggleRowSelection 文档地址
切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它
由于默认选中 只在第一次刷新表格时出现, 由于ajax延迟 我是在created 里 获取数据,所以 只能将默认选中的函数放在了 请求回调函数内 设置一个参数控制只执行一次
1 defaultSelect () { 2 this.tableData.forEach(item => { 3 this.allUsers.push(item.id); 4 item.state == 3 && this.$refs.table.toggleRowSelection(item,true); 5 }); 6 }
once && this.defaultSelect();
http://element.eleme.io/#/zh-CN/component/table#table-column-attributes