使用Element时默认勾选表格toggleRowSelection方式(element remove)

这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 目录

推荐整理分享使用Element时默认勾选表格toggleRowSelection方式(element remove)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:elements怎么用,element key,element key,element.key,element-wise add,element current,element remove,element remove,内容如对您有帮助，希望把文章链接给更多的朋友！

Element时默认勾选表格toggleRowSelection页面效果使用方法：toggleRowSelectiontable表格渲染element表格默认勾选不生效的问题默认勾选可以这样做如果不生效的话，一般需要考虑这几种情况Element时默认勾选表格toggleRowSelection页面效果

在页面初始化加载时将表格中某行默认选中

使用方法：toggleRowSelection方法名说明参数toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）row, selectedtable表格渲染

方法名说明参数toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）row, selectedtable表格渲染

<el-table :data="listPowerSupplyTab" border ref="listPowerSupplyTab" width="100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-columnprop="powerSupplyStationName"label="供电所名称"width="180"></el-table-column><el-table-columnprop="powerSupplyStationAddress"label="供电所地址"width="180"></el-table-column><el-table-columnprop="contacts"label="联系人"></el-table-column><el-table-columnprop="telephone"label="电话"></el-table-column><el-table-columnprop="powerSupplyMode"label="供电方式 "></el-table-column><el-table-columnprop="capacity"label="配电容量 "></el-table-column><el-table-columnprop="subordinatePowerSupplyBureau"label="所属供电局 "></el-table-column></el-table>

注意：

1、注意el-table上有一个ref="listPowerSupplyTab"的属性

2、toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中

使用watch监听listPowerSupplyTab数据

watch:{listPowerSupplyTab(n,o){this.$nextTick( ()=> {this.$refs.listPowerSupplyTab.toggleRowSelection(this.listPowerSupplyTab[0],true);})},},

ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。

当页面有隐藏显示的tab页签时

因为一次性加载数据，因而监听active的变化

watch:{//监听activeactive: {handler(n,o){this.$nextTick(()=> {if(n == '6'){this.listPowerSupplyTabNew.forEach((ele,indexItem) => {if(ele.type=='1'){this.$refs.listPowerSupplyTabRef.toggleRowSelection(ele);}})}else if(n == '7'){this.technicalInformationNew.forEach((ele,indexItem) => {if(ele.type=='1'){this.$refs.technicalInformationNewRef.toggleRowSelection(ele);}})}})},immediate: true,deep: true},},element表格默认勾选不生效的问题默认勾选可以这样做

this.$refs.multipleTable.toggleRowSelection(row);如果不生效的话，一般需要考虑这几种情况

1、获取数据（选中的数据以及表格展示的数据）这里的两个数据必须是同一个对象的数据，也就是数据必须是表格当中的数据，而且 不能深拷贝

2、设置表格数据

3、设置完成后，一般我们都是获取到后端的代码再设置this.$refs.multipleTable.toggleRowSelection(row);

这里还要加一个$nextTick

具体代码如下：

/*** @description: 获取表格数据* @param {String} code* @param {String} srcType*/async getTableData(code, srcType) {try {this.tipContent = 'loading'const { result } = await querySubTabDefine({tableSrcType: srcType,subjectCode: code})for (const item of result) {item.select = item.flag === '1'}this.tableData = resultthis.$nextTick(() => {for (const row of this.tableData) {row.select && this.$refs.table.toggleRowSelection(row, true)}})// console.log(selectArr)this.tipContent = this.tableData.length ? false : 'empty'this.layoutTable()} catch (error) {console.error(error)this.tipContent = 'error'this.tableData = []}},

其中最主要是这一步

this.$nextTick(() => {for (const row of this.tableData) {row.select && this.$refs.table.toggleRowSelection(row, true)}})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。