vue element如何根据表格中的某一个参数来改变按钮的禁用状态

Question

我想通过表格中电脑状态参数来改变按钮的禁用状态

显示库存时按钮可用，显示领用中时按钮禁用

  <el-row>
    <el-col :span="24" class="main-btn">
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit" @click="handleEdit" size="large" :disabled="disabled">变更电脑信息</el-button>
        <el-button type="primary" icon="el-icon-edit-outline" @click="handleUserEdit" size="large" :disabled="disabled">领用</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <el-table :data="cptInfo" @sort-table="handleSortTable"
            highlight-current-row
            border
            @filter-column="handleFilterColumn"
            :height="tableHeight"  v-loading="listLoading" stripe style="width: 100%;"
            ref="table" @row-click="showRow"
            size="mini" v-contextmenu:contextmenu
            @cell-mouse-enter="handleMouseEnterTable">
    <el-table-column label="选择" width="60" align="center">
      <template slot-scope="scope">
        <span class="table-radio">
          <el-radio class="radio" v-model="currentRowIndex" :label="scope.$index">&nbsp; </el-radio>
        </span>
      </template>
    </el-table-column>
    <el-table-column type="index" width="60" align="center">
    </el-table-column>
    <el-table-column prop="servCode" label="服务代码" align="center" width="90">
    </el-table-column>
    <el-table-column prop="pcState" label="电脑状态" align="center" width="90">
    </el-table-column>
    <el-table-column prop="userName" label="领用人" align="center" width="65">
    </el-table-column>
    <el-table-column prop="userDep" label="部门" align="center" width="125">
    </el-table-column>
    <el-table-column prop="userWorkNum" label="工号" align="center" width="60">
    </el-table-column>
    <el-table-column prop="pcModel" label="电脑型号" align="center" width="100">
    </el-table-column>
    <el-table-column prop="cpuInfo" label="CPU" align="center" width="100">
    </el-table-column>
    <el-table-column prop="memory" label="内存" align="center" min-width="100">
    </el-table-column>
    <el-table-column prop="hardDeskInfo" label="硬盘" align="center" width="100">
    </el-table-column>
    <el-table-column prop="cabNetCard" label="有线网卡" align="center" width="145">
    </el-table-column>
    <el-table-column prop="wirelessNetCard" label="无线网卡" align="center" width="150">
    </el-table-column>
    <el-table-column prop="fixAssNum" label="固定资产编号" align="center" width="145">
    </el-table-column>
    <el-table-column prop="remark" show-overflow-tooltip label="备注" align="center" min-width="150">
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
    </el-table-column>
    <el-table-column label="操作" align="center" fixed="right" min-width="175">
      <template slot-scope="scope">
        
          <el-button type="" size="small" @click="handleGetPcLog(scope.$index, scope.row)" icon="el-icon-tickets"
                     alt="afd">查看历史信息
          </el-button>
      </template>
    </el-table-column>
  </el-table>
  

应该怎么改？求大神指点

Answer 1

<template slot-scope="scope">
    <el-button
        size="small"
        icon="el-icon-tickets"
        :disabled="scope.row.pcState === '库存"
        @click="handleGetPcLog(scope.$index, scope.row)"
    >查看历史信息</el-button>
</template>

scope.row能拿得到表格里的数据，你可以根据这个来判断..

Answer 2

通过状态修改disabled的属性值

 <template slot-scope="scope">
     <el-button type="" size="small" disabled="status===0?'true':'false'" @click="handleGetPcLog(scope.$index, scope.row)" icon="el-icon-tickets" alt="afd">查看历史信息
     </el-button>
</template>

Answer 3

楼上的绑定禁用状态属性disabled，需要改成:disabled="status===0?'true':'false'"补充一个冒号

Answer 4

怎么解决的这个跟问题