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; // 点击行,让对应的单选选中的值和表格的选中值保持一致
}
相关推荐
s19134838482d6 分钟前
javascript练习题
开发语言·javascript·ecmascript
这是个栗子22 分钟前
前端开发中的常用工具函数(二)(持续更新中...)
开发语言·前端·javascript
苦藤新鸡26 分钟前
38.交换二叉树中所有的左右节点
开发语言·前端·javascript
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:主题配置实现
android·开发语言·前端·javascript·flutter·ecmascript
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:动漫卡片组件实现
android·开发语言·javascript·flutter·ecmascript
董世昌411 小时前
null和undefined的区别是什么?
java·前端·javascript
软弹2 小时前
Vue2 的数据响应式原理&&给实例新增响应式属性
前端·javascript·vue.js
晚霞的不甘2 小时前
Flutter 布局核心:构建交互式文档应用
开发语言·javascript·flutter·elasticsearch·正则表达式
weixin_638303113 小时前
uniapp组合式和选项式
javascript·vue.js·uni-app
【赫兹威客】浩哥3 小时前
【赫兹威客】框架模板-前端命令行部署教程
前端·vue.js