二次封装 element-plus的Table 表格组件,减少代码臃肿

为什么要二次封装element-plus的Table 表格组件,言简意赅:以后难免会在表格里面加一些统一的逻辑,可以在表格里面书写重复的方法或样式

封装后的使用方式

props

参数类型可选值默认值说明
tableDataArray表格数据
tableConfigArray表格配置数组,具体格式如下

element-plus Table API 的所有参数传入一样有效

tableConfig 数据格式如下


[{title: "标题",field: "fund_name",//__index和__checkbox 保留field 用于序号和选择框align: "left",width: 200,needTitle: true,setColor: true,format: 1,cellClass: "", //String||(rowData)=>{return String}headerClass: "", //String||(rowData)=>{return String}},
]

封装逻辑

  1. 首先我们需要一个表格的根组件去引用element-plus,然后根据数据循环
<template><el-table :data="props.tableData" fit size="small" :border="true"><el-table-column v-for="item in computedTableConfig" :key="item.field" v-bind="item.tableProps"><template #default="scope"><slot :name="item.columnDynamicSlotName" :index="scope.$index" :data="scope.row[item.field]":rowData="scope.row" :config="scope.column"><DataItem :val="scope.row[item.field]" :formatData="item.dataFormat"></DataItem></slot></template></el-table-column></el-table>
</template><script lang="ts" setup>
import DataItem from './common/data-item.tsx'
import { FormatData } from './common/data-item.tsx'export interface TableConfigItem extends FormatData {show_name?: stringfield: stringtitle?: stringisFixed?: booleanwidth?: numberminWidth?: numberalign?: 'left' | 'center' | 'right'
}interface ElTableColumnPropsTypes {fixed?: booleanprop?: stringlabel?: stringwidth?: numberminWidth?: numberalign?: 'left' | 'center' | 'right'
}interface ComputedTableConfigItemTypes {field: stringcolumnDynamicSlotName: string /*  对外暴露的插槽名称*/dataFormat: FormatDatatableProps: ElTableColumnPropsTypes
}
const props = defineProps<{tableConfig: TableConfigItem[]tableData: any[]
}>()const computedTableConfig = computed<ComputedTableConfigItemTypes[]>(() => {return props.tableConfig.map((item) => {const _item: ComputedTableConfigItemTypes = {field: item.field,columnDynamicSlotName: 'column_' + item.field,dataFormat: {},tableProps: {}}for (const key in item) {if (key == 'field') {_item.tableProps.prop = item[key]}if (key == 'isFixed') {_item.tableProps.fixed = item[key]}if (key == 'title') {_item.tableProps.label = item[key]}if (['align', 'width', 'minWidth'].includes(key)) {_item.tableProps[key] = item[key]}if (['setColor', 'needTitle', 'format', 'suffix', 'prefix'].includes(key)) {_item.dataFormat[key] = item[key]}}return _item})
})
</script>
  1. 然后封装处理每一个单元格DataItem的组件(此处我用的是TSX组件)
import { defineComponent } from 'vue'
export interface FormatData extends FormatDataType {setColor?: boolean /* 设置颜色 */needTitle?: boolean /* 是否需要标题 */
}export default defineComponent({name: 'data-item',props: {formatData: {// 表格数据default: () => {},type: Object},val: {required: true}},render() {let { setColor = false, needTitle = false } = this.formatDatalet _color = {}if (setColor) {let _num = parseFloat(res)_num = isNaN(_num) ? 0 : _num_color = _num ? (_num > 0 ? {color:'red'} : {color:'#999999'}) : ''} // 条件判断可以加return (<div style={_color} title={needTitle ? res : ''}>{res}</div>)}
})
  1. 然后测试组件的实现
<template><div><h2 style="color: red;" :style="{ color: red }">表格1</h2><Htable :tableConfig="tableConfig" :tableData="tableData"></Htable></div>
</template><script setup lang='ts'>
import { ref } from 'vue'
import Htable from "./Htable/index.vue";const value1 = ref(0)
const tableConfig = [{title: "标题",field: "tit",align: "left",width: 200,needTitle: true,},{title: "姓名",field: "name",align: "left",width: 200,needTitle: true,},{title: "身高",field: "height",align: "left",needTitle: true,setColor: true,format: 1,},
]
const tableData = [{tit: '撒旦发生',name: '撒打发',height: 12},{tit: '撒旦发qw生',name: '撒打发',height: 123},{tit: '撒旦发qwe生',name: '撒打发',height: 123},{tit: '撒旦发qw生',name: '撒打发',height: 31}
]
</script><style lang='less' scoped></style>

下面效果图
在这里插入图片描述

如果有帮助到你的话,点个赞吧!
在这里插入图片描述

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

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

相关文章

OpenStack安装步骤

一、准备OpenStack安装环境 1、创建实验用的虚拟机实例。 内存建议16GB&#xff08;8GB也能运行&#xff09;CPU&#xff08;处理器&#xff09;双核且支持虚拟化硬盘容量不低于200GB&#xff08;&#xff01;&#xff09;网络用net桥接模式 运行虚拟机 2、禁用防火墙与SELin…

【CSP】2022-03-3 计算资源调度器 stl大模拟使用map优化索引 完整思路+完整的写代码过程(遇到的问题)+完整代码

2022-03-3 计算资源调度器 stl大模拟使用map优化索引 2022-03-3 计算资源调度器 stl大模拟使用map优化索引思路写代码的过程&#xff08;遇到的问题&#xff09;完整代码 2022-03-3 计算资源调度器 stl大模拟使用map优化索引 在联系了之前那么多道stl大模拟题后&#xff0c;终…

揭秘PostgreSQL:超越传统数据库的无限可能!

介绍&#xff1a;PostgreSQL是一个功能强大的开源对象关系数据库系统。以下是对PostgreSQL的详细介绍&#xff1a; 开源性&#xff1a;PostgreSQL是完全开源的&#xff0c;这意味着任何人都可以自由地获取、使用和修改它的源代码。 可定制性&#xff1a;它具有高度可定制性&…

问题解决:NPM 安装 TypeScript出现“sill IdealTree buildDeps”

一、原因&#xff1a; 使用了其他镜像&#xff08;例如我使用了淘宝镜像 npm config set registry https://registry.npm.taobao.org/ &#xff09; 二、解决方法&#xff1a; 1.切换为原镜像 npm config set registry https://registry.npmjs.org 安装typescript npm i …

前端开发的发展史:框架与技术栈的演变

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

告别“死记硬背”,坐席助手让客服新手秒变大咖

在客服行业&#xff0c;新手客服人员常常面临着两大难题&#xff1a;一是需要死记硬背大量的标准答案&#xff0c;二是培训时间长&#xff0c;上岗速度慢。然而&#xff0c;随着科技的发展&#xff0c;这些问题正逐渐得到。今天&#xff0c;我们要为大家介绍一款革命性的客服工…

STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹

STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹 文章目录 STM32CubeIDE基础学习-STM32CubeIDE软件新增工程文件夹前言第1章 添加文件夹第2章 添加文件路径2.1 相对路径方法2.2 绝对路径方法 总结 前言 在编程的过程中&#xff0c;如果需要在原有的工程基础上新增其它的…

哈希表|202.快乐数

力扣题目链接 int getSum(int n) {int sum 0;while (n) {sum (n % 10) * (n % 10);n / 10;}return sum; }bool isHappy(int n){int sum getSum(n);int hash[820] {0};while (sum ! 1) {if (hash[sum] 1) {return false;} else {hash[sum];}sum getSum(sum);}return true…

探索未来:2024年人工智慧驱动的 AI + 研发趋势

#2024 AI 辅助研发趋势# 当我们站在2024年的风口浪尖时&#xff0c;人工智慧辅助研发的格局即将发生翻天覆地的变化。2023年人工智慧的快速发展为各行业的突破性进步铺平了道路。从研发流程的数位转型&#xff0c;到 AI 开发工具2.0 的出现&#xff0c;未来充满了超越 Copilot…

基于数组的顺序表删除操作

删除算法需要注意&#xff1a; 1. 列表长度为0时不能再删除 2.每次删除后长度减一 3.输入删除的数据在原来列表中不存在&#xff0c;不需要改变原列表 #include <iostream> #define MAX 100; using namespace std;int search(int arr[],int len,int n) {for(int i0; i…

【2024泰迪杯】A 题:生产线的故障自动识别与人员配置 Python代码实现

【2024泰迪杯】A 题&#xff1a;生产线的故障自动识别与人员配置 Python代码实现 1 问题 一、问题背景 随着新兴信息技术的大规模应用&#xff0c;工业生产线的智能化控制技术日益成熟。自动生产线 可以自动完成物品传送、物料填装、产品包装和质量检测等过程&#xff0c;极…

LeetCode - 寻找数组的中心

先学习一下前缀和吧 LCR 012.寻找数组的中心LCR 012. 代码解析 在读题读到左侧元素之和等于右侧所有元素之和的时候&#xff0c;我觉得可以用前缀和&#xff0c;然后结合下面的示例&#xff0c;模拟了一下发现确实可以。 我的想法是搞两个数组&#xff0c;一个来存从左到右数…

微信小程序(五十六)逆地址解析示范

注释很详细&#xff0c;直接上代码 温馨提醒&#xff1a;记得给自己的key配额&#xff0c;基础操作与前提配置参考本专栏第五十四篇 新增内容&#xff1a; 1.逆地址解析基础示范 2.开放经纬度参数 3.只列举修改的js部分&#xff0c;前提配置请看 温馨提醒 源码&#xff1a; ind…

软件开发人员从0到1实现物联网项目:需求分析

文章目录 前言市场调研线下考察竞品参考 项目目标功能需求用户端功能需求商家功能需求系统管理功能需求 非功能需求性能安全性易用性扩展性可靠性 小结 前言 上文对实现自助棋牌室项目涉及到的技术做了调研&#xff0c;尤其是物联网技术。那接下来就是对需求进行一番分析了&am…

王道机试C++第 5 章 数据结构二:队列queue和21年蓝桥杯省赛选择题Day32

目录 5.2 队列 1&#xff0e;STL-queue 课上演示&#xff1a; 基本代码展示&#xff1a; 2. 队列的应用 例:约瑟夫问题 No. 2 题目描述&#xff1a; 思路提示&#xff1a; 代码展示&#xff1a; 例&#xff1a;猫狗收容所 题目描述&#xff1a; 代码表示&#xff1…

蓝桥杯-List集合

目录 List集合实例化 List集合实例化步骤 常用方法 ArrayList方法 1&#xff1a;add(Object element) 2&#xff1a;size() 3&#xff1a;get(int index) 4&#xff1a;isEmpty() 5:contains(Object o) 6&#xff1a;remove(int index) 总结ArrayList list集合的特点…

应用方案 | DCDC电源管理芯片MC34063A

DCDC电源管理芯片 MC34063A MC34063A 为一单片 DC-DC 变换集成电路&#xff0c;内含温度补偿的参考电压源&#xff08;1.25V&#xff09;、比较器、能有效限制电流及控制工作周期的振荡器&#xff0c;驱动器及大电流输出开关管等。外配少量元件&#xff0c;就能组成升压、…

Redis缓存、缓存穿透、缓存雪崩、缓存击穿

1.认识Redis缓存 先来认识一下缓存&#xff0c;再了解redis用作缓存时的作用和问题&#xff0c;以及如何解决redis缓存在的问题。 1.1.什么是缓存 1.2.缓存的优缺点(作用和成本) 2.redis缓存的作用 正常客户端请求服务器&#xff0c;服务器会直接访问数据库&#xff0c;这有…

Selenium自动化测试细节讲解

与以前瀑布式开发模式不同&#xff0c;现在软件测试人员具有使用自动化工具执行测试用例套件的优势&#xff0c;而以前&#xff0c;测试人员习惯于通过测试脚本执行来完成测试。 但自动化测试的目的不是完全摆脱手动测试&#xff0c;而是最大程度地减少手动运行的测试。自动化…

【智能家居】东胜物联ODM定制ZigBee网关,助力能源管理解决方案商,提升市场占有率

背景 本文案例服务的客户是专业从事智能家居能源管理的解决方案商&#xff0c;其产品与服务旨在帮助用户监测、管理和优化能源消耗&#xff0c;以提高能源使用效率。 随着公司的扩张&#xff0c;为了增加市场占有率&#xff0c;他们希望找到更好的硬件服务支持&#xff0c;以…