vue3+element plus表格实现单选功能

现有一个需求，表格单选带radio的效果，目前UI库还不支持。只能自行实现：贴下效果图：

 用到vue3 + element plus:

关键代码：

<!-- 表格 -->
<el-table ref="refsTable" @row-click="clickRow" :data="tableData" height="260px" highlight-current-row>
    <el-table-column type="selection" width="40">
        <template #default="scope">
            <el-radio v-model="radio" :label="scope.$index" @change="handleRadioChange(scope.$index, scope.row)"></el-radio>
        </template>
    </el-table-column>

    <el-table-column label="项目编号" width="200px" prop="projectCode" :show-overflow-tooltip="true">
        <template #default="scope">
            <div @click="handleClick(scope.$index)">{{ scope.row.projectCode }}</div>
        </template>
    </el-table-column>

    <el-table-column label="项目名称" prop="projectName" :show-overflow-tooltip="true">
        <template #default="scope">
            <div @click="handleClick(scope.$index)">{{ scope.row.projectName }}</div>
        </template>
    </el-table-column>

    <el-table-column label="开标时间" width="150px" prop="startTime" :show-overflow-tooltip="true">
        <template #default="scope">
            <div @click="handleClick(scope.$index)">{{ scope.row.startTime}}</div>
        </template>
    </el-table-column>
</el-table>


const radio = ref('');
const selectedPersons = ref('');

/**选择行数据 */
function clickRow(row, column, event) {
    selectedPersons.value = row;
}

// 选中单选框  这里不处理数据
function handleClick(index) {
    radio.value = index;    
}


function handleRadioChange(index, row) {
    radio.value = index;
    selectedPersons.value = row;
}