Element Ui 实现表格单选功能

今天碰到一个需求，把element-ui中的table多选框改成单选框，实现单选功能

话不多说，直接上代码

<template>
  <div class="container">
    <el-table
        :data="tableData"
        style="width: 100%"
        @row-click="rowClickHandle"
        highlight-current-row
    >
      <el-table-column align="center" width="50" label="选择">
        <template slot-scope="scope">
          <el-radio class="rowRadio" v-model="rowSelection"></el-radio>
        </template>
      </el-table-column>
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="date" label="日期" width="150"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" width="250"></el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [{
        id: '1',
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '2',
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '3',
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '4',
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '5',
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '6',
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      rowSelection: '',
      radioCheckList: [],
    }
  },
  methods: {
    rowClickHandle(row) {
      this.rowSelection = row.id  //必须要把唯一值赋给rowSelection,否则会出问题
      this.radioCheckList = row   //radioCheckList就是你选中的当前行数据且只能选一行
    },
  },
}
</script>

如果这篇文章对您有用的话，记得一键三连 ！👀