【ElementUI】el-table 实现单选的两种写法

在ElementUI中，实现el-table的单选有两种常见的写法：

1. 使用radio类型的el-table-column
2. 手动编写单选按钮，并使用v-model绑定

1. 使用el-table-column的type属性

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <el-table-column
      type="radio"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', ... }, ...],
      currentRow: null
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  }
}
</script>

2. 手动编写单选按钮

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    highlight-current-row
  >
    <el-table-column
      width="55">
      <template slot-scope="scope">
        <el-radio
          :label="scope.row.id"
          v-model="selectedId"
          @change.native="handleRadioChange(scope.row)">&nbsp;
        </el-radio>
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ id: 1, date: '2016-05-02', name: '王小虎', ... }, ...],
      selectedId: null
    }
  },
  methods: {
    handleRadioChange(row) {
      this.selectedId = row.id;
      // 其他处理逻辑
    }
  }
}
</script>

两种方法都可以实现单选功能，第一种方法更为简洁，第二种方法则提供了更多的自定义空间。选择哪种方法取决于具体的应用场景和个人偏好。