【vue-element】按钮的启用与禁用切换

按钮的启用与禁用切换

接口传回来的数据 0 表示禁用 1表示启用,效果:

table状态栏的显示

<el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {
    
    {
    
     scope.row.state ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>

按钮的设置

<el-table-column>
          <template slot-scope="scope">
            <el-button @click="Preview(scope.row)" type="text" size="small"
              >预览</el-button
            >
            <el-button type="text" size="small" @click="doAllow(scope.row)">
              <template #default v-if="scope.row.state === 1"> 禁用 </template>
              <template #default v-else>启用 </template>
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="doEdit(scope.row)"
              :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="dodDel(scope.row)"
              :disabled="scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>

点击切换事件

 // 点击启用按钮
    async doAllow (row) {
    
    
      console.log(row) // 禁用0, 启用1
      // 取反
      const state = row.state ? 0 : 1
      // 发送请求更改数据
      await changeState({
    
     state, id: row.id })
      // 重新渲染数据
      this.loadList()
    }