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

在Vue 3和Element Plus中，您可以使用el-table和el-radio实现单选效果，并通过设置v-model来绑定选中的值。为了不显示label，您可以不使用el-radio组件的label属性。

以下是一个简单的例子，展示如何在el-table的每一行使用el-radio实现单选，并且不显示label：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <!-- 其他列 -->
    <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <el-radio :value="row.id" v-model="selectedId" @change="handleRadioChange">
          <!-- 不显示label内容 -->
        </el-radio>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
interface TableData {
  id: number;
  date: string;
  name: string;
  // 其他属性
}
 
const tableData = ref<TableData[]>([
  // 初始化数据
]);
 
const selectedId = ref<number | null>(null);
 
const handleRadioChange = (id: number) => {
  console.log('选中的行id:', id);
};
</script>

在这个例子中，el-radio的value绑定到了row.id，这样每一个el-radio的值都会对应表格中的一行。v-model绑定到了selectedId，它会保存当前选中的行的id。如果不想显示label文本，只需不在el-radio组件内部放置任何内容或者设置label属性为空字符串即可。