vue控制disabled动态显示与隐藏

1,643 阅读1分钟

你想实现这个效果?

image.png

逻辑代码

<template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleStatus(scope.row)">
              <span v-if="scope.row.state===0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button type="text" size="mini" @click="hEdit(scope.row)" :disabled="scope.row.state === 1?true:false">编辑</el-button>
            <el-button size="mini" type="text" @click="hDel(scope.row.id)" :disabled="scope.row.state === 1?true:false">删除</el-button>
    </template>

// 启用 禁用
    async handleStatus (row) {
      console.log(row.state, '测试')
      try {
        row.state ? row.state = 0 : row.state = 1
        const res = await changeState({ id: row.id, state: row.state })

        console.log(res, '按钮')
      } catch (error) {
        this.$message.error(error.message)
      }
    },

其余的你要根据你们公司的实际接口填写对应的数据,看你们公司后端给的一个约定的值来进行判断