element-ui表格单选

饿了么表格单选只能选择列，希望前面有选择的框

法一：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="singleElection"
      highlight-current-row
    >
      <el-table-column align="center" width="55" label="选择">
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="编号" width="80"> </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: "0001",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "0002",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "0003",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "0004",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      //   当前选择的行的id
      templateSelection: "",
      //   当前选择的行的数据
      checkList: [],
    }
  },
  methods: {
    singleElection(row) {
      this.templateSelection = row.id
      this.checkList = this.tableData.filter((item) => item.id === row.id)
      console.log(`该行的编号为${row.id}`)
    },
  },
}
</script>

法二:
table的方法，clearSelection()清除表格选中，toggleRowSelection(ele, true) 手动选中。先取清除选中，再根据勾选你选择的那一条数据。

toggleRowSelection有两个参数一个是要选的数据，一个是该数据的状态，true选中，false不选

<template>
  <div class="contentBox"
       v-loading="loading">
 <el-table :data="list"
                ref="accountRef"
                @select="handleTableChange">
        <el-table-column type="selection"  width="45"></el-table-column>
        <el-table-column width="100" prop="name"></el-table-column>
        <el-table-column width="100" prop="no"></el-table-column>
        <el-table-column width="100" prop="date"></el-table-column>
   </el-table>     
   </div>
   </template>        
<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
} from "vue";

export default defineComponent({
  components: { },
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const accountRef = ref(null)
    const data = reactive({
      list: [],
      selectTable: [],
    });
    //表格单选
    const handleTableChange = (list, row) => {
      if (list.length === 0) {
        data.selectTable = [];
        return
      }
      // let itemData = JSON.parse(JSON.stringify(row))
      accountRef.value.clearSelection()
      data.list.forEach((ele) => {
        if (ele.id === row.id) {
          accountRef.value.toggleRowSelection(ele, true)
          data.selectTable = [ele];
        }
      })
    };
    return {
      ...toRefs(data),
      handleTableChange,
      accountRef
    };
  },
});
</script>