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; // 点击行,让对应的单选选中的值和表格的选中值保持一致
}
相关推荐
你也向往长安城吗2 分钟前
推荐一个三维导航库:three-pathfinding-3d
javascript·算法
karrigan12 分钟前
async/await 的优雅外衣下:Generator 的核心原理与 JavaScript 执行引擎的精细管理
javascript
wycode20 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
wycode1 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏1 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
我是哈哈hh2 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清2 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
pepedd8642 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
pepedd8643 小时前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界3 小时前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript