Element-UI Table中嵌套多个 Radio 再次点击取消选中

Element Ui 的 radio组件没有取消选中功能，而实际场景却是需要做取消选中的，如果不小心选了一个后就不能取消了，就会存在操作问题，那如何实现呢？

思路：

可以利用点击事件，和v-model方式，在点击后判断与已选中的数值一样，就清空v-model绑定的值，达到取消选中的效果

代码：

<el-table-column v-if="curTemplate.formType === 3" label="评价情况" width="200">
  <template slot-scope="{ row, $index }">
    <el-radio-group v-model="row.evalOptions" style="line-height: 18px;">
      <el-radio @click.native.prevent="evalOptionClick($event,$index)" v-for="(item, index) in row.chooseNames ? row.chooseNames.split(','):''" :key="index" :label="index.toString()" >
        {{ item }}
        <span style="display: none">{{ index }}</span>
      </el-radio>
    </el-radio-group>
  </template>
</el-table-column>

evalOptionClick(val, index) {
  const showList = this.onlyShowQuestion ? this.onlyQuestionImplementEvalShowList : this.implementEvalShowList
  const curVal = $(val.srcElement).find('span').html()
  // 点击时 值与选中的值相同 则置空该值 表示取消选中
  if (showList[index].evalOptions === curVal) {
    showList[index].evalOptions = ''
    return
  } else {
    showList[index].evalOptions = curVal
  }
}

ps：$event取到的值是MouseEvent对象，通过jquery方式获取到其中的value值