位置: IT常识 - 正文
使用Element时默认勾选表格toggleRowSelection方式(element remove)
发布时间：2024-01-26推荐整理分享使用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)}})以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
上一篇：Python中的多进程是什么(python的多进程模块)
下一篇：python中numpy数组合并的两种方法(python中numpy数组和列表的区别)
