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>
相关推荐
JNU freshman10 分钟前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥10 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥13 分钟前
Vue2 封装二维码弹窗组件
javascript·vue.js
凉柚ˇ13 分钟前
Vue图片压缩方案
前端·javascript·vue.js
慧一居士13 分钟前
vue 中 directive 作用,使用场景和使用示例
前端
慧一居士16 分钟前
vue 中 file-saver 功能介绍,使用场景,使用示例
前端
ByteCraze29 分钟前
秋招被问到的常见问题
开发语言·javascript·原型模式
优弧30 分钟前
Vue 和 React 框架对比分析:优缺点与使用场景
vue.js
渣哥1 小时前
从代理到切面:Spring AOP 的本质与应用场景解析
javascript·后端·面试
文心快码BaiduComate1 小时前
文心快码3.5S实测插件开发,Architect模式令人惊艳
前端·后端·架构