vue3 + ts + element plus 的 el-table 和 el-radio 实现单选效果并设置不显示 label 文本

本文介绍: vue3 + ts + element plus 的 el–table 和 el–radio 实现单选效果并设置不显示 label 文本，通过在 el–radio 标签中添加一个没有内容的标签来实现

单选框 radio 不显示 label 文本的关键，在 el–radio 标签中添加一个没有内容的标签

 &lt;el-table-column width="50px" align="center"&gt;
   &lt;template #default="scope"&gt;
     &lt;el-radio v-model="radio" :label="scope.row.id"&gt;
       &lt;span&gt;&lt;/span&gt;
     </el-radio&gt;
   </template&gt;
 </el-table-column&gt;

完整如下：

<template>
  <el-table
    ref="singleTableRef"
    :data="tableData"
    style="width: 100%"
    @current-change="handleCurrentChange"
  >
    <el-table-column width="50px" align="center">
      <template #default="scope">
        <el-radio v-model="radio" :label="scope.row.id">
          <span></span>
        </el-radio>
      </template>
    </el-table-column>
    <el-table-column type="index" width="50" />
    <el-table-column property="date" label="Date" width="120" />
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTable } from "element-plus";

interface User {
  id: number;
  date: string;
  name: string;
  address: string;
}

const currentRow = ref();
const radio = ref<number>();
const singleTableRef = ref<InstanceType<typeof ElTable>>();

const handleCurrentChange = (row: User | undefined) => {
  currentRow.value = row;
  radio.value = row?.id;
};
const tableData: User[] = [
  {
    id: 1,
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 2,
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 3,
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: 4,
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>