zoukankan      html  css  js  c++  java
  • 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);
        }
      });
    }
    
  • 相关阅读:
    WIN10下搭建reactnative开发Android环境
    node使用JsonWebToken 生成token,完成用户登录、登录检测
    SAP 学习网站汇总
    HTML5 学习网站收集
    优化 优化网站设计
    IoC容器 Spring.NET
    ORACLE 简介及安装
    MVC PureMVC
    HTML5 概要认识
    知识点 NHibernate
  • 原文地址:https://www.cnblogs.com/liuzhulin/p/14531947.html
Copyright © 2011-2022 走看看