效果:
点击启用按钮,状态变为已禁用,修改与删除变为灰色禁用状态
// 状态部分
<el-table-column label="状态" prop="state" width="120">
<template slot-scope="scope">
{{ scope.row.state === 0 ? '已禁用' : '已启动' }}
</template>
</el-table-column>
//开关:启动或者禁用部分
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button type="text" @click="hDisable(scope)">
<template>
{{ scope.row.state === 1 ? '禁用' : '启动' }}
</template>
</el-button>
<el-button type="text" @click="hEdit(scope.row)"
:disabled="scope.row.state === 0">修改</el-button>
<el-button type="text" @click="hDel(scope.row)"
:disabled="scope.row.state === 0">删除</el-button>
</template>
</el-table-column>
// script中的点击开关部分
methods:{
async hDisable(data) {
try {
this.state = data.row.state === 1 ? 0 : 1 // 每次点击就是将状态转换为相反的状态
await changeState({ state: this.state, id: data.row.id }) // 状态改变的接口
this.loadDirectorys()
} catch (e) {
console.log(e)
}
}
}