Element UI 使用 ---table 篇

使用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

转载于:https://www.cnblogs.com/jianzhouf/p/6566370.html