element-ui 表格中修改switch开关状态的二种方法(

Swich默认是boolean类型，如果后台传值为number类型，这个时候我们想用
number来取代boolean类型。

• 第一种：后台字段定义为 0 / 1（给后台传0 / 1）
  这里有个问题需要注意：当你点击修改状态时，结果你并没有修改，你点击取消关闭时，switch的状态依旧改变了，这是因为v-model双向绑定原理，点击开关时会实时改变状态，只需要把v-model改为:value=""即可

<el-table>
  <el-table-column label="状态" width="120">
      <template slot-scope="scope">
        // 区别在这行代码
        // <el-switch v-model="scope.row.cazt" :active-value="0" :inactive-value="1" @change="handleChangeStatus($event,scope.row.id)"></el-switch>
         <el-switch :value="scope.row.cazt" :active-value="0" :inactive-value="1" @change="handleChangeStatus($event,scope.row.id)"></el-switch>
      </template>
   </el-table-column>
</<el-table>

methods:{
  // 点击修改状态
    handleChangeStatus($event, id) {
      if ($event == 0) { // 这里判断一下
        // 启用
        this.$confirm('确认启用吗？', '操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            await this.$requestInternet.post(`/api/xxx?userid=${id}&status=${$event}`)
            this.$message.success('启用成功')
            this.onSearch()
          })
          .catch(() => {})
      } else {
        // 禁用
        this.$confirm('确认禁用吗？', '操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            await this.$requestInternet.post(`/api/xxxx?userid=${id}&status=${$event}`)
            this.$message.success('禁用成功')
            this.onSearch()
          })
          .catch(() => {})
      }
    }
}

• 第二种：后台字段定义为 true / false（给后台传true / false）

<el-table>
  <el-table-column label="状态" width="120">
      <template slot-scope="scope">
        // 区别在这行代码
         <el-switch @change="(status)=>handleChangeStatus(status,scope.row.id)" :value="!scope.row.status"></el-switch>
      </template>
   </el-table-column>
</<el-table>

methods:{
  // 点击修改状态
    handleChangeStatus($event, id) {
      if ($event) {
        // 启用
        this.$confirm('确认启用吗？', '操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            await this.$requestInternet.post(`/api/xxx?userid=${id}&status=${$event}`)
            this.$message.success('启用成功')
            this.onSearch()
          })
          .catch(() => {})
      } else {
        // 禁用
        this.$confirm('确认禁用吗？', '操作确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            await this.$requestInternet.post(`/api/xxxx?userid=${id}&status=${$event}`)
            this.$message.success('禁用成功')
            this.onSearch()
          })
          .catch(() => {})
      }
    }
}