Vue中表格数据使用switch开关控制某条数据状态信息

向右看齐 2023-01-12 11:57 169阅读 0赞

先看效果图:  
点击开关实时改变数据状态  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk4MDExNg_size_16_color_FFFFFF_t_70]  
show\_status状态值:1000显示 0000隐藏  
![在这里插入图片描述][20210128151254524.png]

## vue代码: ##

1.switch开关

<el-table-column align="center" min-width="50" label="显隐状态">
      <template slot-scope="scope">
          <el-switch v-model="scope.row.showStatus" class="isShow" :active-value="'1000'" :inactive-value="'0000'" active-text="显示" inactive-text="隐藏" active-color="#13ce66" inactive-color="#ff4949" @change="changeSwitch(scope.row)">
                </el-switch>
      </template>
    </el-table-column>

补充要素:

active-value:为显示状态(也就是开关状态的'开'),对应数据库字段showStatus=1000时 如下图显示
    inactive-value:为隐藏状态(也就是开关状态的'关'),对应数据库字段showStatus=0000时
    当数据库字段类型不为int型,如varchar时,加上单引号避坑 eg: active-value="'1000'"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk4MDExNg_size_16_color_FFFFFF_t_70 1]

2.data数据

data() {
        return {
          dataInfo:{
            showStatus:''
          },
        };
      },

3.开关样式代码:

4.开关@change事件代码:

changeSwitch (data) {
          axios.post(this.$api.customerQaUpdate,data).then(res=>{
                 if(res.code=='200'){
                  this.successMessage('操作成功');
                 }else{
                  this.errorMessage(res.message);
                 }
                }).catch(err=>{})
          console.log(data)
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk4MDExNg_size_16_color_FFFFFF_t_70]: /images/20221119/7b6c3e2a74424214b139b2b6c8c4b614.png
[20210128151254524.png]: /images/20221119/8a84840458564764a14345ad3014e304.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk4MDExNg_size_16_color_FFFFFF_t_70 1]: /images/20221119/4f896384522d47db96ebf514e5f5e210.png