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 方法使用。———>实现选中状态

代码:

<el-table-column type="selection" width="55" :reserver-selection="true"></el-table-column>


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;

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容