单选框 radio 不显示 label 文本的关键,在 el-radio 标签中添加一个没有内容的标签
<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>
完整如下:
<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>