elementUI的开关组件

需求:表格某列的内容直接定义为开关,并且改变开关状态就向后台发请求。其实就是表格组件和开关组件的结合使用。
前端的任务是:开关状态改变就向后台发送品牌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);
    }
  });
}
原文地址:https://www.cnblogs.com/liuzhulin/p/14531947.html