vue table表格勾选根据列表状态判断是否可勾选

 

需求：只有审核结果是待审核的状态下，才可勾选

代码如下：

 <el-table

      v-loading="loading"

      border

      :data="applicationList"

      @selection-change="handleSelectionChange"

    >

      <el-table-column

        type="selection"

        width="50"

        align="center"

        :selectable="handleTableSelectStatus"  // 主要用到的方法

      >

      </el-table-column>

      <el-table-column

        type="index"

        width="50"

        label="序号"

        align="center"

      ></el-table-column>

      <el-table-column label="申请人" align="center" prop="applicationPerson" />

      <el-table-column label="申请时间" align="center" prop="applicationTime">

        <template slot-scope="scope">

          <span>{{ parseTime(scope.row.applicationTime, "{y}-{m}-{d}") }}</span>

        </template>

      </el-table-column>

      <el-table-column

        label="申请类型"

        align="center"

        prop="applicationType"

        :formatter="applicationTypeFormat"

      ></el-table-column>

      <el-table-column label="所属区域" align="center" prop="areaName" />

      <el-table-column label="留观点" align="center" prop="pointName" />

      <el-table-column label="申请原因" align="center" prop="reason" />

      <el-table-column label="审核人" align="center" prop="reviewer" />

      <el-table-column label="审核时间" align="center" prop="examineTime">

        <template slot-scope="scope">

          <span>{{ parseTime(scope.row.examineTime, "{y}-{m}-{d}") }}</span>

        </template>

      </el-table-column>

      <el-table-column label="审核结果" align="center" prop="examineResult">

        <template slot-scope="scope">

          <span v-if="scope.row.examineResult == 0">待审核</span>

          <span v-else-if="scope.row.examineResult == 1">通过</span>

          <span v-else-if="scope.row.examineResult == 2">不通过</span>

        </template>

      </el-table-column>

      <el-table-column label="审核意见" align="center" prop="examineOpinion" />

      <el-table-column

        label="操作"

        align="center"

        class-name="small-padding fixed-width"

      >

        <template slot-scope="scope">

          <el-button

            size="mini"

            type="text"

            icon="el-icon-edit"

            @click="handleUpdate(scope.row)"

            >查看详情</el-button

          >

        </template>

      </el-table-column>

    </el-table>

主要方法：

methods：{

   handleTableSelectStatus(row, index) {

      if (row.examineResult) {   //  审核状态字段

        return 0; // 1 是通过 ，2 是不通过（因为我这里只需要待审核状态）

      } else {

        return 1 || 2;    //不可勾选

      }

    },

}