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) } })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。