需求:表格某列的内容直接定义为开关,并且改变开关状态就向后台发请求。其实就是表格组件和开关组件的结合使用。
前端的任务是:开关状态改变就向后台发送品牌id和改变后的值,并且后台存储的值为0和1(elementUI默认是boolean类型)。
思路:使用插槽机制,把整行的数据全部拿到,解构出正确的数据并发送请求。
<el-table-column
prop="showStatus"
header-align="center"
align="center"
label="显示状态"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.showStatus"
active-color="#13ce66"
inactive-color="#ff4949"
@change="upateBrandStatus(scope.row)"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</template>
</el-table-column>
upateBrandStatus(data) {
console.log("最新信息", data);
let { brandId, showStatus } = data;
this.$http({
url: this.$http.adornUrl("/product/brand/update"),
method: "post",
data: this.$http.adornData({ brandId, showStatus }, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
});
} else {
this.$message.error(data.msg);
}
});
}