Vue + Element + Table 分页选择勾选 和 取消勾选
<el-table ref="goodOrder" :data="goodOrder" :row-key="getRowKeys" v-loading="loadingGoodOrder" border@row-click="toggleSelection" @selection-change="handleSelectionChange"><el-table-column ty
·
<el-table ref="goodOrder" :data="goodOrder" :row-key="getRowKeys" v-loading="loadingGoodOrder" border @row-click="toggleSelection" @selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" fixed header-align="center" align="center"/>
</el-table>
data() {
return {
goodOrder:[],
loadingGoodOrder:true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 勾选的表格数据
intoMaterialData:[],
}
},
methods:{
// 选择行 勾选复选框
toggleSelection(row) {
this.$refs.goodOrder.toggleRowSelection(row);
},
getRowKeys(row) {
return row.id;
},
// 表格多选框 选中数据
handleSelectionChange(selection){
this.intoMaterialData = selection;
this.ids = selection.map(item => item.id);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
close(){
// 取消表格的勾选
this.goodOrder.forEach(row => {
this.$refs.goodOrder.toggleRowSelection(row,false);
})
}
}
更多推荐
已为社区贡献20条内容
所有评论(0)