vue的表格的状态switch实现

最新推荐文章于 2025-03-06 09:15:00 发布

清北_

最新推荐文章于 2025-03-06 09:15:00 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/programmer188/article/details/113660511

版权

<el-table-column label="状态" align="center" prop="status">
  <template slot-scope="scope">
    <el-switch
      v-model="scope.row.status"
      active-value="1"
      inactive-value="0"
      @change="handleStatusChange(scope.row)"
    ></el-switch>
  </template>
</el-table-column>

handleStatusChange(row) {
  let text = row.status === '1' ? '启用' : '停用'
  this.$confirm('确认要"' + text + '""' + row.username+ '"吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(function () {
    return changeStatus(row.id, row.status)
  }).then(() => {
    this.msgSuccess(text + '成功')
  }).catch(function () {
    row.status = row.status === '0' ? '1' : '0'
  })
},