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; // 点击行,让对应的单选选中的值和表格的选中值保持一致
}
相关推荐
海底火旺16 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺16 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码17 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
JustHappy20 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
培根芝士41 分钟前
electron-updater实现自动更新
javascript·electron
海天胜景1 小时前
vue3 el-table 右击
javascript·vue.js·elementui
Mercury-circle1 小时前
JavaScript基础知识合集笔记1——数据类型
开发语言·javascript·笔记
樊小肆2 小时前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
一天睡25小时2 小时前
视频HLS分片与关键帧优化深度解析
前端·javascript
Java~~2 小时前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js