element ui @selection-change多选对数据的操作
<template>
<div>
<el-row class="top-block padding-20px" :gutter="40">
<el-col :xs="24" :sm="12" :lg="6">
<el-row type="flex" class="row-bg" justify="">
<el-col :xs="6" :sm="6" :lg="6" class="flex-align-center">
<label for="">激活码：</label>
</el-col>
<el-col :xs="18" :sm="18" :lg="18">
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-row type="flex" class="row-bg" justify="">
<el-col :xs="6" :sm="6" :lg="6" class="flex-align-center">
<label for="">分配经销商：</label>
</el-col>
<el-col :xs="18" :sm="18" :lg="18">
<el-input v-model="admin" placeholder="请输入内容"></el-input>
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-row type="flex" class="row-bg" justify="">
<el-col :xs="6" :sm="6" :lg="6" class="flex-align-center">
<label for="">状态：</label>
</el-col>
<el-col :xs="18" :sm="18" :lg="18">
<el-select v-model="value" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-row type="flex" class="row-bg" justify="start">
<el-button type="primary" @click="getcodelist">查询</el-button>
<el-button @click="reset">重置</el-button>
</el-row>
</el-col>
</el-row>
<el-row class="padding-20px" :gutter="20">
<el-col :xs="24" :sm="12" :lg="12">
<el-button type="primary" @click="distriButecode('')"
>分配给经销商</el-button
>
<el-button type="primary" @click="cancelList('')">取消分配</el-button>
</el-col>
</el-row>
<el-row>
<el-table
ref="multipleTable"
:data="codeList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="SN编号" prop="code">
<!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
</el-table-column>
<el-table-column prop="type" label="设备型号"> </el-table-column>
<el-table-column
prop="belongDealer"
label="经销商"
show-overflow-tooltip
>
</el-table-column>
<el-table-column prop="belongUser" label="用户" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="status" label="激活状态" show-overflow-tooltip>
</el-table-column>
</el-table>
</el-row>
<el-row>
<Pagination
:total="total"
v-on:size-change="sizeChange"
v-on:current-change="currentChange"
:currentPage="form.pageNo"
:pageSize="form.pageSize"
/>
</el-row>
<ActivationCodeAssignmentDialog ref="activationCodeAssignmentDialog" />
</div>
</template>
<script>
import { cancelcode } from "@/http";
import { distributecode } from "@/http";
import { codelist } from "@/http";
import Pagination from "@/components/pagination";
import ActivationCodeAssignmentDialog from "@/components/dialog/ActivationCodeAssignment";
export default {
components: {
Pagination,
ActivationCodeAssignmentDialog,
},
data() {
return {
codeList: [],
touserid: "",
activationId: "",
input: "",
admin: "",
options: [
{
value: "",
label: "全部",
},
{
value: "0",
label: "未激活",
},
{
value: "1",
label: "激活",
},
{
value: "-1",
label: "未分配",
},
],
value: "",
multipleSelection: [],
form: {
pageNo: 1,
pageSize: 10,
},
total: 0,
};
},
mounted() {
this.getcodelist();
},
methods: {
reset() {
this.form.pageNo = 1;
this.getcodelist();
},
getcodelist() {
codelist({
...this.form,
}).then((res) => {
console.log(res);
this.codeList = res.data.data.list;
this.total = res.data.data.count;
this.pageNo = res.data.data.pageNo;
if (res.data.code === "000000") {
} else {
this.$message.error("加载失败");
}
});
},
getcancelCode(touserid, activationId) {
cancelcode({
touserid, //用户id
activationId, // 激活码id
}).then((res) => {
console.log(res);
});
},
cancelList() {
if (this.multipleSelection.length) {
let touserid = this.multipleSelection.map((item) => item.id).join(",");
let activationId = this.multipleSelection.map((item) => item.code).join(",");
this.getcancelCode(touserid, activationId);
}
},
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
sizeChange(val) {
this.form.pageSize = val;
this.getcodelist();
console.warn(val);
},
currentChange(val) {
this.form.pageNo = val;
this.getcodelist();
console.warn(val);
},
// 分配
getDistributecode(touserid, activationId) {
distributecode({
touserid, //用户id
activationId, // 激活码id
}).then((res) => {
console.log(res);
});
},
distriButecode() {
if (this.multipleSelection.length) {
let touserid = this.multipleSelection.map((item) => item.id).join(",");
let activationId = this.multipleSelection.map((item) => item.code).join(",");
this.getDistributecode(touserid, activationId);
this.$refs.activationCodeAssignmentDialog.show({touserid,activationId,});
}
},
deleteItem(item) {
this.$alert("确定要删除吗", "提示", {
confirmButtonText: "确定",
showCancelButton: true,
showClose: false,
callback: (action) => {
this.$message({
type: "info",
message: `action: ${action}`,
});
},
});
},
disabledItem(item) {
this.$alert("确定要停用吗", "提示", {
confirmButtonText: "确定",
showCancelButton: true,
showClose: false,
callback: (action) => {
this.$message({
type: "info",
message: `action: ${action}`,
});
},
});
},
},
};
</script>
<style></style>
handleSelectionChange(val) { this.multipleSelection = val; }//val 为选中数据的集合
列表的数据选择之后会保存到multipleSelection里面,通过this.multipleSelection.prop字段 取得每一个选项的值，prop字段就是表格里面子项的prop值。
this.multipleSelection.length为选择了多少项.
参考这篇map的用法https://www.jianshu.com/p/e87b195f6943
let activationId = this.multipleSelection.map((item) => item.status)map创建的数组放item中的staus字段
let activationId = this.multipleSelection.map((item) => item.status).join(",");map创建的数组放item中的staus字段，多选时将字段用逗号隔开，放到一个字符串中
效果：