使用Element时 默认勾选表格toggleRowSelection
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
页面效果:
在页面初始化加载时将表格中某行默认选中
使用方法:toggleRowSelection
方法名 | 说明 | 参数 |
---|---|---|
toggleRowSelection | 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | row, selected |
table表格渲染
<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
},
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)