el-table-column type=“selection“单选框控制有些可选有些无法选中（vue2 element）

这是一个 el-table ,前面有勾选框

需求：

“结算月份”有判断条件，如果超过某个事件，这条数据的"修改"、“删除”按钮都隐藏掉了

问题：

单个的按钮可以隐藏，但是上方的按钮不能隐藏，而且勾选了列表的数据，上方的"修改"、“删除”按钮可以对数据进行控制（即使单个的按钮隐藏掉，还是能通过上方按钮控制勾选的数据）

所以，需要对前面的勾选框进行处理，分为 可选 和 不可选

<el-table
      max-height="500px"
      v-loading="loading"
      :data="staffIncomeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      ...
      <el-table-column label="调整日期" align="center" prop="amountDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.amountDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="12" v-if="scope.row.showEdit">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['lawerfin:staffIncome:edit']"
                >修改
              </el-button>
            </el-col>
            <!-- <el-col :span="24" v-else>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-setting"
                @click="handleAdjust(scope.row)"
                >调整
              </el-button>
            </el-col> -->
            <el-col :span="12" v-if="scope.row.showEdit">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['lawerfin:staffIncome:remove']"
                >删除
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

因为我单个的按钮是通过自身的 showEdit 属性来控制的，所以也要利用这个属性

解决方法：

1.<el-table-column type="selection" width="55" align="center" />加上 :selectable="selectableRow" 修改成下面：

<el-table-column type="selection" width="55" align="center" :selectable="selectableRow" />

2.在method 加上事件：页面加载就会执行selectableRow函数，而且row接收到的是当前项（你有多少列，一条数据就会执行多少次selectableRow函数），index 则是当前项的索引（从0开始）

methods: {
    selectableRow(row,index){
      console.log(row,index)
      // return index > 0 测试
      return row.showEdit
    },
...
}

例子：