点击启动,其他按钮(修改,删除)状态为禁用状态

效果:

点击启用按钮,状态变为已禁用,修改与删除变为灰色禁用状态

// 状态部分
 <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)
      }
    }
}