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)"
          > 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赋值就行了