elementPlus el-table动态列扩展及二维表格

1、循环列数据源,动态生成列

<template><div><el-table ref="table" :data="pageData.tableData" stripe style="width: 100%"><el-table-column v-for="column in pageData.columns" :key="column.prop" :prop="column.prop" :label="column.label":min-width="column.minWidth"></el-table-column></el-table></div>
</template><script setup lang="ts">
import {reactive} from 'vue';const pageData = reactive({columns: [{prop: 'source',label: '来源',minWidth: '100px'},{prop: 'target',label: '目标',minWidth: '100px'},{prop: 'value1',label: 'value1(万)',minWidth: '150px'},{prop: 'value2',label: 'value2(亿)',minWidth: '150px'},],tableData: [{source: '北京',target: '上海',value1: '189',value2: '1.89'}, {source: '天津',target: '河北',value1: '233',value2: '2.33'}, {source: '上海',target: '陕西',value1: '97',value2: '0.97'}, {source: '内蒙古',target: '山东',value1: '180',value2: '1.80'}]
});</script>

2、对某一列用slot的方式拓展,把这一列拓展成多列

<template><div><el-table :data="tableData"><el-table-column label="来源" prop="source"></el-table-column><el-table-column label="目标" prop="target"></el-table-column><el-table-column v-for="(item, index) in tableData[0].zbList" :key="index"><template #header>{{ item.zb }}</template><template v-slot="{ row }">{{ row.zbList[index].value }}</template></el-table-column></el-table></div>
</template><script lang="ts" setup>
import {ref} from 'vue';const tableData = ref([{source: '北京',target: '上海',zbList: [{zb: '指标一',value: '2000'},{zb: '指标二',value: '4000'},{zb: '指标三',value: '6000'},]
},{source: '北京',target: '天津',zbList: [{zb: '指标一',value: '20'},{zb: '指标二',value: '40'},{zb: '指标三',value: '60'},]},
]);
</script>

3、二维表格

<template><el-table :data="data.tableData" style="width: 100%"><el-table-column prop="color" label="颜色\尺码" width="180"></el-table-column><el-table-column v-for="(i, index) in data.sizes" :label="i" align="center" header-align="center" :key="index"><template v-slot="scope">{{ scope.row[i] }}</template></el-table-column></el-table>
</template>
<script setup lang="ts">
import {reactive} from 'vue';const data = reactive({sizes: ["x", "xl"],tableData: [{color: "red",xl: 10,x: 0},{color: "blue",xl: 10,x: 0},{color: "black",xl: 10,x: 5}],
});</script>

参考: Element-plus的el-table动态列表格_elementplus 带状态表格-CSDN博客

            前端(PC)—elementUI实现二维表格 - 简书

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LDR6328助力Type-C普及,便捷充电,绿色生活更精彩

随着科技的进步和全球统一接口的需求&#xff0c;Type-C接口正日益受到青睐。越来越多的设备正选择采纳这一先进的接口设计&#xff0c;它的普及无疑在改善着我们的日常生活。 在过往&#xff0c;许多小功率设备如小风扇、蓝牙音箱、桌面台灯以及家用加湿器等&#xff0c;都普遍…

单片机IGBT驱动电路一例

概述&#xff1a; 驱动的作用有三个&#xff1a; 1.是作为放大器获得所需要的驱动电压。 2.是提高输出电流能力。 3.是进行功率回路和控制回路的隔离 信号从MCU到IGBT驱动芯片 首先驱动电流需要放大 MCU的输出电流是mA级别&#xff0c;而IGBT需要的驱动电流可能达到几安培…

npm版本切换工具nvm

有了nvm&#xff0c;可以在一台机器上同时安装多个版本的nodejs&#xff0c;然后指定使用某个版本。 前端开发的时候&#xff0c;安装依赖一直是个令我头痛的问题。总是报错&#xff0c;或者不是少了这样就是少了那样&#xff0c;鸡飞狗走。以往&#xff0c;一般要装个enpm&am…

【氮化镓】在轨实验研究辐射对GaN器件的影响

【Pioneering evaluation of GaN transistors in geostationary satellites】 摘要&#xff1a; 这篇论文介绍了一项为期6年的空间实验结果&#xff0c;该实验研究了在地球静止轨道上辐射对氮化镓&#xff08;GaN&#xff09;电子元件的影响。实验使用了四个GaN晶体管&#xf…

最新高自定义化的AI翻译(沉浸式翻译),可翻译网页和PDF等文件或者文献(附翻译API总结,Deeplx的api,Deepl的api)

前序 常见问题&#xff1a; 1.有时候想翻译网页&#xff0c;又翻译文献怎么办&#xff1f;下两个软件&#xff1f; 2.什么软件可以翻译视频字幕&#xff1f; 3.什么软件可以翻译PDF文件&#xff1f; 沉浸式翻译介绍 可以翻译文献可以翻译视频字幕可以翻译PDF文件支持OpenAI翻译…

pycharm环境配置踩坑

一、新建目录 venv 二、创建本地解释器 3、配置国内镜像 1&#xff09;镜像源 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里云&#xff1a;http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大…

HiveSQL如何生成连续日期剖析

HiveSQL如何生成连续日期剖析 情景假设&#xff1a; 有一结果表&#xff0c;表中有start_dt和end_dt两个字段&#xff0c;&#xff0c;想要根据开始和结束时间生成连续日期的多条数据&#xff0c;应该怎么做&#xff1f;直接上结果sql。&#xff08;为了便于演示和测试这里通过…

使用Springboot配置生产者、消费者RabbitMQ?

生产者服务 1、引入依赖以及配置rabbitmq 此时我们通过使用springboot来快速搭建一个生产者服务 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> applica…

【Django开发】前后端分离美多商城项目第6篇:用户部分,1. 业务说明【附代码文档】

美多商城项目4.0文档完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;美多商城&#xff0c;项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业,5.O2O--线上到线下,6.F2C--工厂到个人。项目准备&#xff0c;配置1. 修改set…

【大数据】安装hive-3.1.2

1、上传HIVE包到/opt/software目录并解压到/opt/modules/ tar -zxvf apache-hive-3.1.2-bin.tar.gz -C /opt/modules/ 2、修改路径 mv /opt/modules/apache-hive-3.1.2-bin/ /opt/modules/hive 3、将hIVE下的bin目录加入到/etc/profile中 export HIVE_HOME/opt/module…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之四 简单视频倒放效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之四 简单视频倒放效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之四 简单视频倒放效果 一、简单介绍 二、简单视频倒放效果实现原理 三、简单视频倒放效果案例实现…

牛客论坛项目中使用到Redis的地方总结

实体分为很多类&#xff0c;实体的确定要通过实体类型和实体id两个属性同时确定。牛客论坛中使用到了3类实体&#xff1a; 1 登录 使用到的Redis命令&#xff1a; set key value // 设置指定key的值为value get key // 获取指定key的值1.1 存储/获取验证码 验证码文本&…