vue-elementui switch开关的使用

vue-elementui switch开关的使用

• 话不多说上代码

相关标签释义：

• active-color：活跃时的颜色
• inactive-color：不活跃时的颜色
• active-value：活跃时的值
• inactive-value：不活跃时的值
• @change修改显示状态事件

table中显示状态代码片段

<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"
            :active-value="1"
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)">
        </template>
      </el-table-column>

状态修改方法实例

     //修改状态
    updateBrandStatus(row) {
      console.log(row);
      //只需要传入修改的逐渐ID和状态即可
      let { brandId, showStatus } = row;
      this.$http({
        url: this.$http.adornUrl("/product/brand/update"),
        method: "post",
        data: this.$http.adornData({ brandId, showStatus }, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "状态更新成功"
        });  
      });
    }