element plus的el-table上加入单选按钮el-radio

element plus的el-table默认只支持加入复选框。但有时候单选框也需要。实现起来也比较简单，先看下最终效果图：

实现代码：

html：

<el-table :data="tableData" stripe style="width: 100%" :height="300" @current-change="clickChange">
  <el-table-column align="center" width="40px">
    <template #default="scope">
      <el-radio v-model="tableRadio" :label="scope.row">&nbsp;</el-radio>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="名称" />
  <el-table-column prop="size" label="大小" width="180" />
  <el-table-column prop="type" label="类型" width="180" />
  <el-table-column prop="editTime" label="最后修改时间" width="280" />
</el-table>

注意：clickChange 方法，此方法实现了点击行，选中radio的效果。

js（setup语法糖写法）：

import { ref, defineProps } from 'vue'
const tableData = ref([
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122', size: 0, type: 0, editTime: '2020-07-24 13:58'},
  {name: '122.html', size: 0, type: 1, editTime: '2020-07-24 13:58'},
  {name: '122.html', size: 0, type: 1, editTime: '2020-07-24 13:58'}
])
// radio
const tableRadio = ref(null)
// 选中方法
function clickChange (item) {
  tableRadio.value = item
}