Vue Element-UI中el-table实现单选的示例代码
更新时间:2023年12月15日 09:04:04 作者:梦之归途
在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下
实现方式: 给el-table-column设置el-radio
<div class="default-page">
<el-table :data="accountList" v-loading="loading" highlight-current-row @current-change="handleCurrent" border height="250px">
<el-table-column width="60px">
<template v-slot="scope">
<!-- label值要与el-table数据id实现绑定 -->
<el-radio v-model="unitInfo.userId" :label="scope.row.userId" @change="handleRowChange(scope.row)">{{""}}</el-radio>
</template>
</el-table-column>
<el-table-column type="index" label="序号" />
<el-table-column prop="userId" label="账号编号" />
<el-table-column prop="username" label="账号名称" />
<el-table-column prop='status' label="账号状态">
<template slot-scope="scope">
<el-tag :type="scope.row.status | filters('availableType')">{{ scope.row.status | filters('availableValue')}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>export default {
data() {
return {
}
},
methods: {
// 方法一:与el-table @current-change方法 绑定
handleCurrent (val) {
if (val) {
this.unitInfo.userId = val.userId
this.unitInfo.man = val.username
}
},
// 方法二:与el-radio @change方法 绑定
handleRowChange (data) {
if (data) {
this.unitInfo.userId = data.userId
this.unitInfo.man = data.username
}
}
}
}到此这篇关于Vue Element-UI中el-table实现单选的示例代码的文章就介绍到这了,更多相关Element el-table单选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3 + Element Plus 实现表格全选/反选/禁用功能(示例详解)
本文详细介绍了如何使用Vue3组合式API和ElementPlus实现表格的全选/反选/禁用功能,并分享了分页保持、视觉提示优化、性能优化等技巧,同时,还提供了常见问题的解决方案和扩展思考,帮助开发者构建功能丰富且用户体验良好的表格组件,感兴趣的朋友一起看看吧2025-03-03
Vue路由对象属性 .meta $route.matched详解
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue.js利用Object.defineProperty实现双向绑定
这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定,帮大家解析神秘的Object.defineProperty方法2017-03-03
Vue3实现markdown-it支持chartjs、Echartjs、mermaid的渲染(附实例代码)
markdown-it-vue使用markdown-it作为Markdown数据解析引擎,整合多种markdown-it插件,并内置了一些自己的功能性插件,这篇文章主要介绍了Vue3实现markdown-it支持chartjs、Echartjs、mermaid渲染的相关资料,需要的朋友可以参考下2025-08-08


最新评论