element-UI实现table表格单选点击取消选中，以及表格多选并置灰某个选项

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

表格单选并取消选中

如果你想实现在一个表格中，有个单选的选项，点击可以选中某一行的数据，再次点击也可以取消勾选，那下面这个方法可以满足你的需求。

网上很多方法使用都不行，多多少少都有点问题，参照别人的写了一份，自测没有问题，代码你可以再精简一下，我这里就不优化了，如果你遇到这样的需求，请看下面的代码。

效果图：点击选中---再次点击取消选中

<el-table
   v-loading="loadingg"
    :data="tableData" height="100%"
    style="width: 100%"
    :highlight-current-row="true"
    @current-change="clickChange">
    <el-table-column
      label="选择"
      width="50px">
      <template slot-scope="scope">
        <el-radio
            :label="scope.row.id"
            v-model="selectRadio"
            @click.native.stop.prevent="getCurrentRow(scope.row)"
          >&nbsp;</el-radio>
      </template>
    </el-table-column>

    <el-table-column
      prop="name"
      label="名称"  >
    </el-table-column >
 </el-table>

注意：@click.native.stop.prevent，一定要加上这些修饰符，不然点击的话会触发2次，勾选就不生效了。

data () {
  return {
     loading: false,
     tableData: [],
     selectRadio: '',
     forbidden: true
   }
 },
 // 单选
 getCurrentRow (row) {
    if (!this.forbidden) {
      this.forbidden = true
    }
    if (this.selectRadio) {
      if (this.selectRadio === row.id) {
        this.selectRadio = ''
        this.forbidden = false
        setTimeout(() => {
          this.forbidden = true
        }, 0)
        this.$emit('changeData', {}) // 取消勾选就把回传数据清除
        return
      } else {
        this.forbidden = false
        setTimeout(() => {
          this.forbidden = true
        }, 0)
      }
    } else {
      this.forbidden = false
      setTimeout(() => {
        this.forbidden = true
      }, 0)
    }
    this.selectRadio = row.id
    this.$emit('changeData', row)
  }

changeData是向父组件回传的数据

如果编辑时实现从父组件进来，默认选中某个数据的话，可以通过props传值，给selectRadio赋值就行了

表格多选并置灰

<el-table
  ref="multipleTable"
  :data="dataList"
  tooltip-effect="dark"
  style="width: 100%"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    :selectable="checkSelectable"
    width="55">
  </el-table-column>
  <el-table-column
    prop="name"
    label="名称">
  </el-table-column>
</el-table>

实现多选： @selection-change="handleSelectionChange"

<el-table-column
    type="selection"
    width="55">
  </el-table-column>

实现置灰：

<el-table-column
    type="selection"
    :selectable="checkSelectable"
    width="55">

:selectable="checkSelectable"

method中方法

// this.checkedInitQuestions 为需要置灰的数据列表
checkSelectable (row) {
  let mark = 0
  this.checkedInitQuestions.forEach((item) => {
    if (item.id === row.id) {
      mark = mark + 1
      return false
    }
  })
  return mark <= 0
}