您现在的位置是：网站首页> 编程资料编程资料

使用Element时默认勾选表格toggleRowSelection方式_vue.js_

2023-05-24 378人已围观

简介 使用Element时默认勾选表格toggleRowSelection方式_vue.js_

Element时默认勾选表格toggleRowSelection

页面效果

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

在这里插入图片描述

使用方法：toggleRowSelection

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

table表格渲染

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

注意：

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) } })

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

您可能感兴趣的文章:

上一篇：解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题_vue.js_

下一篇：echarts3如何清空上一次加载的series数据_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网