el-table组件 单选 同时监听 row-click 点击 单选框radio 无法选择问题记录

需求

表格数据实现单选，单击某行实现单选，再次点击选中行，取消单选

问题

• 在不需要点击取消单选的功能 此问题不会出现
• 点击组件区域 会无法选择, debugger 发现触发了row-click 两次

问题代码如下

<template>
  <el-table 
  ...
  @row-click="handleClick"
  >
  ...
  <el-table-column>
     <template scope="scope">
          <el-radio
            v-model="tableRadio"
            class="radio"
            :label="scope.row.id"
          >
            <i />
          </el-radio>
     </template>
  </el-table-column>
  ...
</template>

<script>
  ...
  data() {
    return {
      tableRadio: ''
    }
  },
  methods: {
     handleClickRow(row) {
       if (this.tableRadio === row.id) {
          // 取消选择
          this.tableRadio = ''
       } else {
          this.tableRadio = row.id
       }
     }
  }
</script>

解决方案

• v-model 双向绑定 换为 value
• 加一个开关 forbidden
  代码如下：

<template>
  <el-table 
  ...
  @row-click="handleClick"
  >
  ...
  <el-table-column>
     <template scope="scope">
          <el-radio
            :value="tableRadio"
            class="radio"
            :label="scope.row.id"
          >
            <i />
          </el-radio>
     </template>
  </el-table-column>
  ...
</template>

<script>
  ...
  data() {
    return {
      tableRadio: '',
      timer: null,
      forbidden: false
    }
  },
  beforeDestroy() {
    if (this.timer) {
       clearTimeout(this.timer)
    }
  },
  methods: {
     handleClickRow(row) {
       if (this.forbidden) {
          this.forbidden = false
          return
       }
       if (this.tableRadio === row.id) {
          // 取消选择
          this.tableRadio = ''
       } else {
          this.tableRadio = row.id
       }
       // 当el-table 上加了row-click时，点击el-radio组件会触发两次事件的hack解决方案
       this.forbidden = true
       this.timer = setTimeout(() => {
         this.forbidden = false
       }, 0)
     }
  }
</script>