VUE+ elementUI 表头动态渲染的两种方法

news2024/12/23 10:07:36

效果:

<template>
    <div>
        <el-alert title="比较麻烦的写法" type="error"></el-alert>

        <el-table border style="width:300px;" :data="tabelData">
            <el-table-column
                v-for="column in columnList" :key="column.prop"
                :label="column.label"
                :prop="column.prop"
                :width="column.width"
                v-bind="column">
            </el-table-column>
        </el-table>

        <el-alert title="简便的写法" type="success"></el-alert>
        
        <el-table border style="width:300px;" :data="tabelData">
            <el-table-column
                v-for="column in columnList" :key="column.prop"
                v-bind="column">
            </el-table-column>
        </el-table>
    </div>
</template>

JS

<script>
export default {
    data(){
        return{
            columnList:[
                {
                    label:'姓名',
                    prop:'name',
                    width:80
                },
                {
                    label:'年龄',
                    prop:'name'
                }
            ],
            tabelData:[
                {
                    name:'张三',
                    age:20
                },{
                    name:'王五',
                    age:19
                },
                {
                    name:'李四',
                    age:18
                },
                {
                    name:'赵六',
                    age:17
                }
            ]
        }
    }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1551284.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问

前言 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊如何在群晖NAS搭建bitwarden密码管理软件并实现无公网IP远程访问&#xff0c;希望大家能觉得实用&#xff01; 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&am…

访问学者如何申请国外信用卡?

作为一名访问学者&#xff0c;如果你计划在国外长期居住或短期停留&#xff0c;并希望申请国外信用卡&#xff0c;这可能是一个相当实用的工具。国外信用卡不仅可以帮助你在海外购物和旅行时更加便利&#xff0c;还能建立起你在国际金融体系中的信用记录&#xff0c;为未来的金…

鼠标不动了怎么办?鼠标不能移动解决方法

鼠标不能移动有可能是鼠标坏了&#xff0c;或者是电脑的软件和硬件有冲突等原因造成。最近有小伙伴就咨询了有关鼠标的问题&#xff0c;昨天鼠标还能使用&#xff0c;不知道为什么今天就突然不能用了。那么我们在排除鼠标坏掉了的情况下&#xff0c;试试对鼠标进行修复吧。下面…

请你记住这3款国产软件,免费又实用,它们值得收藏

闲话不多说&#xff0c;直上干货。 1、坚果云 坚果云是一款极具良心的网盘软件&#xff0c;其免费版本同样无广告干扰&#xff0c;界面设计简约大气&#xff0c;在文件上传与下载速度上&#xff0c;坚果云完全不限速&#xff0c;这一点远超其他同类产品。 用户可以在手机、电…

粗略总结AI大模型学习需要了解的要点

目录 一、概念简介 二、兴起原因 三、相关要点 四、不足之处 五、总结 一、概念简介 AI大模型学习是指利用大规模数据集和强大计算能力进行深度学习模型的训练。随着数据的爆炸式增长和计算资源的提升&#xff0c;AI大模型学习成为了现代人工智能研究的重要方向。 二、兴起…

徽宇阀门现已加入2024第13届生物发酵展会

参展企业介绍 温州徽宇阀门有限公司是专业生产高精度不锈钢过滤器设备及卫生级阀门、管道、管件及泵等系列产品。秉承严谨、实用的作风,所有产品均选用高品质的原材料。公司对产品品质的要求没有止境,生产全部采用CNC等国际一流的数控加工中心设备&#xff0c;所有产品均按照IS…

Linux系统使用Docker部署Portainer结合内网穿透实现远程管理容器和镜像

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

VR全景赋能智慧农业,打造沉浸式种植体验平台

随着人口的增长&#xff0c;传统农业也正在面临着不一样的挑战&#xff0c;加上很多人对农业的固有印象&#xff0c;很少有年轻人愿意下到农田里&#xff0c;那么该如何提高产量、降低成本以及引导年轻人深刻感受现代农业成为了急需解决的问题。 随着城市化脚步的推进&#xff…

代码随想录笔记|C++数据结构与算法学习笔记-栈和队列(〇)|stack、queue、单调队列和优先队列(priority_queue)、大顶堆和小顶堆

文章目录 stack容器stack 基本概念常用接口构造函数赋值操作数据存取大小操作 queue容器queue常用接口构造函数&#xff1a;赋值操作数据存取大小操作 单调队列优先队列大顶堆小顶堆 stack容器 stack 基本概念 栈中只有顶端的元素才可以被外界使用&#xff0c;因此栈不允许有遍…

ubuntu22.04安装dnsmasq最详细易懂

安装 准确的来说&#xff0c;不是安装&#xff0c;因为默认ubuntu22版本自带的有dnsmasq&#xff0c;所以我们不用下载了&#xff0c;直接使用即可&#xff0c;否则就会产生冲突&#xff0c;这块吃了大亏。 最好在root账户下操作&#xff0c;没有设置root密码的&#xff0c;可…

AWS SES发送邮件时常见的错误及解决方法?

AWS SES发送邮件如何做配置&#xff1f;使用AWS SES发信的限制&#xff1f; 在使用AWS SES发送邮件时&#xff0c;可能会遇到一些常见的错误。AokSend将介绍一些常见的AWS SES发送邮件错误及其相应的解决方法&#xff0c;帮助用户更好地利用AWS SES进行邮件发送。 AWS SES发送…

海外盲盒APP:加速开拓海外盲盒市场

盲盒是年轻群体消费中增速较快的模式&#xff0c;从前几年起&#xff0c;盲盒就在我国掀起了一股热潮&#xff0c;市场得到了迅速发展。 如今&#xff0c;盲盒经济已经遍布到了全球&#xff0c;尤其是在亚洲地区&#xff0c;盲盒消费呈现出了高速发展态势&#xff0c;在海外市…

利用RWKV-Runner初步感受一下ai的世界

最近又听到群里的高手在讨论RWKV-Runner&#xff0c;于是没忍住&#xff0c;就想试试&#xff0c;没想到第一关就卡住了。 从群里大咖上传的RWKV-Runner_windows_x64.exe文件开始吧&#xff0c;又找了个虚拟机&#xff0c;直接放在桌面上运行一下&#xff0c;结果就跳出一堆文…

百度谷歌301强引蜘蛛池效果怎么样

301强引蜘蛛池效果怎么样 本文 虚良SEO 原创&#xff0c;转载保留链接&#xff01;网址&#xff1a;百度谷歌301强引蜘蛛池效果怎么样 - 虚良SEO 随着搜索引擎优化&#xff08;SEO&#xff09;技术的发展&#xff0c;越来越多的网站开始采用蜘蛛池技术来提高网站的排名和流量。…

解决方案:如何安装neo4j软件

文章目录 一、安装JDK二、安装neo4j 一、安装JDK 第一步先安装JDK&#xff0c;因为neo4j环境需要JDK&#xff0c;过程比较多&#xff0c;截图如下&#xff1a; 安装JDK网址 https://www.oracle.com/java/technologies/downloads winR&#xff0c;输入cmd&#xff0c;再输入j…

MySQL安装和配置(超详细)

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;&#x1f468;&#x1f3fb;‍&#x1f393;告别&#xff0c;今天 &#x1f4d4;高质量专栏 &#xff1a;☕java趣味之旅 欢迎&#x1f64f;点赞&#x1f5e3;️评论&#x1f4e5;收藏&#x1f493;关注 &#x1f496;衷心的希…

Wagtail-基于Python Django的内容管理系统CMS实现公网访问

目录 ⛳️推荐 前言 1. 安装并运行Wagtail 1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具 3. 实现Wagtail公网访问 4. 固定Wagtail公网地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给…

Canal解决Redis缓存与Mysql数据库的一致性问题

1、什么是Canal&#xff1f; 如何解决Redis缓存与Mysql数据库的一致性问题&#xff1f;我们常用数据双删缓存超时设置去解决。这样最差的情况&#xff0c;就是在超时时间内&#xff0c;数据存在不一致。 canal&#xff0c;译为管道&#xff0c;主要用途是基于 MySQL 数据库增…

文心一言 VS 讯飞星火 VS chatgpt (224)-- 算法导论16.3 6题

六、假定我们有字母表 C{0&#xff0c;1&#xff0c;…&#xff0c;n-1} 上的一个最优前缀码&#xff0c;我们希望用最少的二进制位传输此编码。说明如何仅用 2n-1n⌈lgn⌉ 位表示 C 上的任意最优前缀码。(提示&#xff1a;通过对树的遍历&#xff0c;用 2n-1 位说明编码树的结…

计算机网络知识

第一章 局域网广播技术&#xff1b;广域网交换技术 n-SDUn-PCIn-PDU TCP/IP网络层无连接&#xff0c;传输层有链接和无连接&#xff1b;OSI传输层有链接和无连接&#xff0c;网络层有链接 TCP/IP没有明确区分服务&#xff0c;接口&#xff0c;协议&#xff0c;OSI明确区分 OSI…