ElementUI-table框的选中

2017-11-24

实现图1的全选功能：将下表中的table框默认选中

1

主要涉及到table以下的属性和方法：

1、Table-Method：toggleRowSelection

toggleRowSelection：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；参数：row, selected———>获取被选中的行

代码：

vm.$refs.multipleTable.clearSelection(this.multipleSelection);

list.forEach(function(row) {

            vm.$refs.multipleTable.toggleRowSelection(row,true)

});

注意：

1、$refs. multipleTable 中的multipleTable 是table中ref的值

2、 vm.$refs.multipleTable.clearSelection(this.multipleSelection);清除选项，以至于切换时出现的都是第一次的状态

2、Table-column Attributes：reserve-selection

reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。———>实现选中状态

代码：

3、Table Attributes：row-key

row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持user.info[0].id，此种情况请使用Function——————>当table被默认全选时，简单的理解就是选中全选的那个框，如此属性，全选的框无法实现

代码：

:row-key="getRowKeys"

getRowKeys:function(rows) {

            returnrows.id;

},