el-table动态配置显示表头

在实际工作中,会遇到动态配置e-table表头的情况,如下方法可以实现:

复制代码
//  要展示的列
column: [{
    prop: 'name', name: '名称'
}, {
    prop: 'age', name: '年龄'
}, {
    prop: 'sex', name: '性别'
}, {
    prop: 'address', name: '地址'
}, {
    prop: 'city', name: '城市'
}]
html 复制代码
<el-table :data="data">
    <el-table-column 
        v-for="item in column" 
        :key="item.name" 
        :prop="item.prop" 
        :label="item.name">
    </el-table-column>
</el-table>
相关推荐
晚烛几秒前
实战前瞻:构建高韧性、可扩展的 Flutter + OpenHarmony 智慧政务服务平台
javascript·flutter·政务
崇山峻岭之间3 分钟前
Matlab学习记录06
前端·学习·matlab
半兽先生4 分钟前
微信小程序与web-view页面双向通信
前端·微信小程序·小程序
西西学代码4 分钟前
Flutter---常用打印图标
前端·python·flutter
晷龙烬14 分钟前
Vue的“小外挂”:玩转自定义指令!
前端·javascript·vue.js
小徐不会敲代码~15 分钟前
Vue3 学习 4
前端·vue.js·学习
小小前端要继续努力16 分钟前
边缘函数 (Edge Functions)
前端·edge
海市公约18 分钟前
CSS 核心知识点精讲:基础概念、样式规则与布局技巧
前端·css·盒子模型·选择器·网页布局·网页样式设计
蜗牛攻城狮20 分钟前
Vite 项目中 `node_modules/.vite/deps` 文件夹详解
前端·vite·构建工具
elangyipi12321 分钟前
使用CSS Contain 优化你的页面(重排和重绘)
前端·css