Element-UI Table表格组件实现单选功能

话不多说直接上代码：

<template>
  <div class="hello">
    <h4>{{ msg }}</h4>
    <div class="table_container">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column label="" width="50" align="center">
          <template slot-scope="scope">
            <el-radio
              class="table_radio"
              v-model="currentRow.id"
              :label="scope.row.id"
            />
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" align="center"> </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      tableData: [
        {
          id: 18,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 218,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 1238,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          id: 4518,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      currentRow: {
        id: 33,
      },
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    },
  },
}
</script>
<style scoped>
.table_container {
  width: 800px;
  margin: 0 auto;
}
::v-deep .table_radio .el-radio__label {
  display: none !important;
}
</style>

在实际业务场景：