使用Element时默认勾选表格toggleRowSelection方式
作者：xiongdaandxiaomi
这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Element时默认勾选表格toggleRowSelection
页面效果
在页面初始化加载时将表格中某行默认选中
使用方法：toggleRowSelection
| 方法名 | 说明 | 参数 |
|---|---|---|
| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
table表格渲染
方法名说明参数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-column
prop="powerSupplyStationName"
label="供电所名称"
width="180">
</el-table-column>
<el-table-column
prop="powerSupplyStationAddress"
label="供电所地址"
width="180">
</el-table-column>
<el-table-column
prop="contacts"
label="联系人">
</el-table-column>
<el-table-column
prop="telephone"
label="电话">
</el-table-column>
<el-table-column
prop="powerSupplyMode"
label="供电方式 ">
</el-table-column>
<el-table-column
prop="capacity"
label="配电容量 ">
</el-table-column>
<el-table-column
prop="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:{
//监听active
active: {
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 = result
this.$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)
}
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。