Vue——多选table列进行操作,支持分页
1、官网提供:手动添加一个el-table-column,设type属性为selection即可<template><div><el-button @click="TestSelect">按钮</el-button></div><el-tableref="multipleTable":data="tableData"
·
1、官网提供:手动添加一个el-table-column,设type属性为selection即可
<template>
<div>
<el-button @click="TestSelect">按钮</el-button>
</div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</template>
js:TestSelect 方法打印出 选择多行的内容
methods: {
TestSelect:function(){
//打印出 multipleTable 选择内容
console.log(this.$refs.multipleTable.selection)
},
toggleSelection:function(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
//清楚选择内容
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange:function(val) {
//selection-change 当选择项发生变化时会触发该事件 ,打印出目前选中内容
this.multipleSelection = val;
}
}
测试效果如下:可以拿到每一行数据进行后续批处理
2、勾选列之后,切换页数会发现会清除之前选中的 (设置分页:https://blog.csdn.net/wx19900503/article/details/100926516)
此时候需要设置其他属性:
html:
<el-table
:row-key="getRowKeys"
ref="tableData"
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
style="width: 100%;margin-top:0.5%">
<el-table-column
reserve-selection=true
type="selection"
width="55">
</el-table-column>
<el-table-column
fixed
prop="name"
label="对比名称"
width="120">
</el-table-column>
</el-table>
修改:methods:
getRowKeys: function (row) {
//此处 根据实际数据选中字段
return row.date;
},
getSelectData : function (row) {
var selection = _self.$refs.tableData.selection
//选择当前行[] 对象 可以打印进行控制台查看
//selection[i].id 取当前行Id
}
测试如下:
更多推荐
已为社区贡献6条内容
所有评论(0)