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

先看效果图:
点击开关实时改变数据状态

show_status状态值:1000显示 0000隐藏

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'"

2.data数据

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

3.开关样式代码:

<style>
  .isShow .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  /*打开时文字位置设置*/
  .isShow .el-switch__label--right {
    z-index: 1;
   right: 8px;
 }
 /*关闭时文字位置设置*/
 .isShow .el-switch__label--left {
   z-index: 1;
   left: 8px;
 }
 /*显示文字*/
 .isShow .el-switch__label.is-active {
   display: block;
 }
 .isShow.el-switch .el-switch__core,
 .el-switch .el-switch__label {
   width: 50px !important;
 }
style>

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)
    }