跳至主要內容

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

zfh原创大约 2 分钟约 487 字

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

这里有个问题需要注意:当你点击修改状态时,弹出提示框,点击取消关闭时,switch 的状态依旧改变了:

See the Pen by zhangfanhang on CodePen.

这是因为 v-model 双向绑定原理,点击开关时会实时改变状态,只需要把 v-model 改为:value即可

  • 第一种:后台字段定义为 0 / 1(给后台传 0 / 1)
<el-table>
  <el-table-column label="状态" width="120">
      <template slot-scope="scope">
        // 区别在这行代码
         <el-switch :value="scope.row.cazt" :active-value="1" :inactive-value="0" @change="handleChangeStatus($event,scope.row.id)"></el-switch>
      </template>
   </el-table-column>
</<el-table>

methods:{
  // 点击修改状态
    handleChangeStatus($event, id) {
  // $event 改变后的值
      if ($event == 1) { // 这里判断一下
        // 启用
        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}`)               IW
            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(() => {})
      }
    }
}
上次编辑于:
本站勉强运行 小时