需求:选中时页面对表格中某个属性进行汇总展示;最后提交接口时将选中的标识集合传到后端;
表格内容:
<el-table
ref="multipleTable"
:data="tableData"
stripe
highlight-current-row
height="705"
size="small"
@select="selectMethods"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
prop="consName"
align="center"
label="用户名称"
></el-table-column>
<el-table-column
prop="consNo"
align="center"
label="用户编号"
></el-table-column>
<el-table-column
prop="drCap"
align="center"
label="容量"
></el-table-column>
</el-table>
data:
allSelection: [], // 所有选中的行数
multipleSelection: [], // table组件当前页选中
计算属性(用于展示选中行数容量汇总):
// 选中的容量总和
sumDemandCap() {
return this.allSelection.reduce((x, y) => {
return x + Number(y.drCap)
}, 0)
},
// 每行的唯一标识
idKeys() {
return this.allSelection.map((item) => item.consNo)
},
方法:
// 设置选中的方法
setSelectRow() {
if (!this.allSelection || this.allSelection.length <= 0) {
return
}
// 标识当前行的唯一键的名称
let selectAllIds = this.idKeys
this.$refs.multipleTable.clearSelection()
for (var i = 0; i < this.tableData.length; i++) {
if (selectAllIds.indexOf(this.tableData[i]['consNo']) >= 0) {
// 设置选中,记住table组件需要使用ref="table"
this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true)
}
}
},
//用户列表选中结果
handleSelectionChange(val) {
this.allSelection.push.apply(this.allSelection, val)
let tempArr = this.allSelection
this.allSelection = commonMethods.deteleObject(tempArr)
this.multipleSelection = this.allSelection
//this.DrDventInvitInsert("shijian")
},
// 选中当前行的方法
selectMethods(val, row) {
let ary = this.allSelection
for (var i = 0; i < ary.length; i++) {
if (ary[i].consNo == row.consNo) {
ary.splice(i, 1)
}
}
this.allSelection = ary
},
// 剔除所有选中行数中重复的数据
deteleObject(obj) {
var uniques = [];
var stringify = {};
for (var i = 0; i < obj.length; i++) {
var keys = Object.keys(obj[i]);
keys.sort(function (a, b) {
return (Number(a) - Number(b));
});
var str = '';
for (var j = 0; j < keys.length; j++) {
str += JSON.stringify(keys[j]);
str += JSON.stringify(obj[i][keys[j]]);
}
if (!stringify.hasOwnProperty(str)) {
uniques.push(obj[i]);
stringify[str] = true;
}
}
// uniques = uniques;
return uniques;
}