数据需确保弹窗已打开
<el-table
stripe border
ref="multipleTable"
:data="setList" //表格数据
tooltip-effect="dark"
style="width: 100%"
:row-key="getRowKeys"
@selection-change="handleSelectionChange">
>
<el-table-column
type="selection"
:reserve-selection="true" //为true时可以夸分页多选
width="55">
</el-table-column>
</el-table>
<pagination //分页组件
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getlistSet"
/>
methods: {
getRowKeys(row) {
return row.id
},
handleDialogClose() { //设置弹窗关闭事件
this.$refs.multipleTable.clearSelection(); //关闭弹窗时清空选表所选项
},
handleSelectionChange(val) { //获取所选数据
this.foodList = val
},
submitSet() {
let newArr = []
for (let i = 0; i < this.foodList.length; i++) {
newArr.push(this.foodList[i].id)
}
newArr = [...new Set(newArr)]
let resultString = newArr.join(','); //用逗号拼接所选数据id
let obj = {
week_id: this.weekId,
food_id: resultString,
type: 1
}
if (obj.food_id == '') {
this.$message({
message: "请选择",
type: "error",
});
return
}
//调保存接口。。。。。
},
getlistSet() { //获取数据
this.listLoading = true;
getFood(this.listQuery).then((res) => {
this.listLoading = false;
if (res.errcode != 0) return;
this.setList = res.data.list;//表格数据
res.data.list.forEach((row) => {
if (row.is_choose == 1) {//已选中项回显
this.$refs.multipleTable.toggleRowSelection(row)
}
})
});
},
}