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

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

效果图

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

  
      
   


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）

  
      
   


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(() => {})
      }
    }
}