表格多选并根据每行值初始化选中状态(el-table-column type=“selection“)
需求描述:首先需求表格遍历显示数据,每行前需要一个复选框;要求二是根据每个对象的某个属性值判断是否默认被选中,如下图,是可关联商品的默认被选中表格前面加复选按钮可以直接参考el官方组件第一步: 在 el-table 中加ref 属性,它在vue中相当于是id的存在。 ref=“multipleTable”,下面写 js 用的<!--vue--><el-table:data="ta
·
需求描述:首先需求表格遍历显示数据,每行前需要一个复选框;要求二是根据每个对象的某个属性值判断是否默认被选中,如下图,是可关联商品的默认被选中
表格前面加复选按钮可以直接参考el官方组件
第一步: 在 el-table 中加ref 属性,它在vue中相当于是id的存在。 ref=“multipleTable”,下面写 js 用的
<!--vue-->
<el-table
:data="tableData"
ref="multipleTable"
v-loading="loading"
@selection-change="selectionChange"
style="width: 100%;margin-top:60px"
:header-cell-style="{ background: '#F0F2F5', color: '#000000' }"
>
<el-table-column type="selection" width="25px"></el-table-column>
………………
</el-table>
toggleRowSelection 是官方方法:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中);参数:row, selected
如下,先遍历每行数据对其该属性值做判断,然后更新选中状态
//可关联状态的商品默认全选
//created()
this.$nextTick(() => {
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].isRerationItem.status == 1) {
this.$refs.multipleTable.toggleRowSelection(this.tableData[i])
}
}
})
//methods
// 勾选发生变化
selectionChange(val) {
console.log(val)
this.multipleSelection = val
this.selectionIds = this.multipleSelection.map(function(item) {
return item['itemId']
})
console.log('选中的商品id数组:' + this.selectionIds)
},
官方文档:Element表格
参考文章:el-table type=“selection” 默认选中
更多推荐
已为社区贡献4条内容
所有评论(0)