el-table实现单选及点击当前行选中

javascript 复制代码
<base-table v-loading="table.loading" :data="table.data" :empty-text="table.empty"
                    @current-change="handleSelectionChange">
            <el-table-column width="55" >
                <template #default="{row}">
                    <el-radio v-model="currentRow" :label="row">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column label="序号"  type="index" width="55" />
            <el-table-column label="事项编码"  prop="matterCode"  show-overflow-tooltip/>
            <el-table-column label="事项名称"  prop="matterName"  show-overflow-tooltip/>
            <template #noOperate></template>
        </base-table>
javascript 复制代码
// 单选框的绑定值要定义一个空对象

const multipleSelection = ref([]);

const currentRow = ref({});
javascript 复制代码
const handleSelectionChange = (val) => {
    multipleSelection.value = [val]; // 获取当前选中的值
    currentRow.value = val; // 点击行,让对应的单选选中的值和表格的选中值保持一致
}
相关推荐
chilavert31817 小时前
技术演进中的开发沉思-260 Ajax:核心动画
开发语言·javascript·ajax
程序员小易17 小时前
前端轮子(1)--前端部署后-判断页面是否为最新
前端·vue.js·node.js
xiaoxue..17 小时前
列表转树结构:从扁平列表到层级森林
前端·javascript·算法·面试
小oo呆18 小时前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Agent
前端·javascript·easyui
BD_Marathon18 小时前
关于JS和TS选择的问题
开发语言·javascript·ecmascript
dly_blog18 小时前
Vite 原理与 Vue 项目实践
前端·javascript·vue.js
计算机毕设VX:Fegn089518 小时前
计算机毕业设计|基于springboot + vue汽车销售系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·汽车·课程设计
仅此,18 小时前
前端接收了id字段,发送给后端就变了
java·前端·javascript·spring·typescript
樱桃园园长18 小时前
【Three.js 实战】手势控制 3D 奢华圣诞树 —— 从粒子系统到交互实现
javascript·3d·交互
二狗哈19 小时前
Cesium快速入门30:CMZL动画
javascript·3d·webgl·cesium·地图可视化