基于element自动表格

需求是根据JSON文件生成表格,包含配置和自动props属性以及过滤器;

数据示例:

表格设置:

/*** 表格表头信息* @chineseToPinYin: 这是封装的根据中文汉字转换为拼音的方法* @prop: 表头字段名* @filter: 数据过滤器* @label: 表头显示名称*/
const tableTitle = [{ prop: chineseToPinYin('日期'), label: '日期', width: '160' },{ prop: chineseToPinYin('地点'), label: '地点', filter: addressFilter },{ prop: chineseToPinYin('早餐'), label: '早餐' },{ prop: chineseToPinYin('开会'), label: '开会' },{ prop: chineseToPinYin('纪要'), label: '纪要' },{ prop: chineseToPinYin('工作'), label: '工作' },{ prop: chineseToPinYin('午餐'), label: '午餐' },{ prop: chineseToPinYin('午休'), label: '午休' },{ prop: chineseToPinYin('下班'), label: '下班' }
]

addressFilter 过滤器:

function addressFilter (value) {return addressOptions.filter(i => i.value === value)[0].label
}

表格事件示例:

/*** 表格按钮事件* @event: 按钮事件名(子组件直接@eventName=handleCustomizeEvent)* @primary:按钮类型(按钮的颜色)*/
const tableButton = [{ label: '编辑', event: 'edit', type: 'primary' },{ label: '删除', event: 'delete', type: 'danger' }
]

抛出示例:

export { tableTitle, tableButton }

组件示例:

<el-table ref="autoTable" size='mini'border stripe default-expand-allrow-key="id":data="data"tooltip-effect="dark":header-cell-style="headerCellStyle":cell-style="cellStyle"style="width: 100%"cell-class-name='custom-table'@cell-click="handleClickCells"@row-click="handleClickRow"@selection-change="handleSelectionChange"><!--左侧自定义插槽--><slot name="before"></slot><!--左侧是否有勾选--><el-table-column v-if="isChecked" fixed="left" label="全选" type="selection" width="40"></el-table-column><!--循环表格--><el-table-column v-for="(item, key) in title" :label="item.label" :width="item.width" :key="key"><template slot-scope="scope"><span v-if="item.filter">{{item.filter(scope.row[item.prop])}}</span><span v-else>{{scope.row[item.prop]}}</span></template></el-table-column>
<!--    <el-table-column v-for="(item, key) in title" :prop="item.prop" :label="item.label" :width="item.width" :key="key"/>--><!--右侧自定义插槽--><slot name="after"></slot><!--右侧按钮集合--><el-table-column v-if="event.length" fixed="right" :width="event.length*70" label="操作"><template slot-scope="scope"><span class="customize-link" v-for="(item, key) in event" :key="key" @click="handleTableEvent(item.event, scope.$index, scope.row)"><el-link :type="item.type" :icon="item.icon" size="mini">{{item.label}}</el-link></span></template></el-table-column></el-table>

PROPS示例:

  props: {isChecked: {type: Boolean,default: false},title: {type: Array,default: () => ([])},data: {type: Array,default: () => ([])},event: {type: Array,default: () => ([])}}

methods示例:

  methods: {// 表格选择行handleSelectionChange (row) {this.$emit('checkRow', row, this.$refs.autoTable)},// 表格操作事件handleTableEvent (event, index, row) {this.$emit(event, index, row)},// 单击行handleClickRow (row, column, event) {this.$emit('clickRow', row, column, event)},// 选择某个单元格handleClickCells (row, column, cell, event) {this.$emit('clickCell', row, column, cell, event)}}

页面示例:

<auto-table is-checked :title="tableTitle" :data="mockTableData" :event="tableButton" @checkRow="handleTableCheckRow" @edit="handleClickTableEdit" @delete="handleClickTableDelete"/>

事件部分就不用叨叨了吧;

效果示例:

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

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

相关文章

最长连续序列【中等】

leetcode链接 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a;输入&#xff1a;nums [100,4,200,1,3,2] 输出&am…

『new Date 在 IOS 失效 の bug』

问题&#xff1a;new Date()在安卓下正常&#xff0c;在IOS下显示不出来。 原因&#xff1a;在IOS下&#xff0c;new Date(“2000-2-22 00:10”),返回的是undefined&#xff0c;因为IOS不支持这种类型格式。 解决&#xff1a;更换下格式&#xff1a;new Date(“2000/2/22”) …

类初始化,类加载,类加载器

类初始化&#xff0c;类加载&#xff0c;类加载器 1. 类加载1.1. 类的加载1.2. 类的链接1.2.1. 验证1.2.2. 准备1.2.3. 解析 2. 类加载器2.1. 类加载器分为四种&#xff1a;前三种为虚拟机自带的加载器。2.2. 类加载有三种方式&#xff1a;2.3. **JVM类加载机制**2.4. 双亲委派…

GeoTrust通配符证书:保护您的网站安全

GeoTrust通配符 SSL证书是一种特殊的 SSL 证书类型&#xff0c;它可以同时为您的主域名及其所有子域提供安全保护。无论您有多少个不同的子域需要保障&#xff0c;都可以通过单一的 GeoTrust 通配符 SSL 证书轻松实现&#xff0c;极大地简化了管理流程并降低了成本。 此外&…

1688商品详情数据接口(1688.item_get)

1688商品详情数据接口是一种程序化的接口&#xff0c;通过这个接口&#xff0c;商家或开发者可以使用自己的编程技能&#xff0c;对1688平台上的商品信息进行查询、获取和更新。这个接口允许商家根据自身的需求&#xff0c;获取商品的详细信息&#xff0c;例如价格、库存、描述…

JUC(Java Util Concurrent)多线程并发库

JUC&#xff08;Java Util Concurrent&#xff09;是Java中用于编写多线程并发程序的库。开发过程中使用JUC主要有以下几个好处&#xff1a; 1. 提高程序性能&#xff1a;使用JUC可以实现多线程并发执行&#xff0c;充分利用多核CPU&#xff0c;提高程序的性能。 2. 简化代码…

群晖NAS搭建WebDav服务做文件共享,可随时随地远程访问

文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后&#xff0c;启动webdav服务&#xff0c;并勾选HTTP复选框 2. 局域网测试WebDav服务2.1 下载RaiDrive客户端2.2 打开RaiDrive&#xff0c;设置界面语言可以选择中文2.3 点击添加按钮&#xff0c;新建虚拟驱动区2…

从事软件测试8年,对业务测试人员的一些思考

自从事测试工作八年多以来&#xff0c;经历过三个部门多条业务线&#xff0c;也经历过测试转型再回到测试&#xff0c;在此过程中对测试工作和角色的认知也逐步有些思考&#xff0c;想把这些思考分享给大家&#xff0c;希望为业务测试同学提供一些有价值的思路。 同时&#xff…

YOLOV7主干改进,使用fasternet轻量化改进主干(完整教程)

1&#xff0c;Pconv&#xff08;来自Fasternet&#xff09;&#xff08;可作为模型中的基础卷积模块使用&#xff09; 论文链接&#xff1a;https://arxiv.org/abs/2303.03667 2&#xff0c;为了大家方便的使用&#xff0c;这里我对原本的PConv的代码做了部分的改动&#xff0…

立哥尖端技术-云安全整合方案

云安全管理中心 安全管理中心具有集中管控云环境整体安全态势的功能&#xff0c;具备以下功能&#xff1a; &#xff08;1&#xff09;部署方式&#xff1a;与云平台紧耦合&#xff0c;可实现云平台一键下单&#xff0c;自动交付。 &#xff08;2&#xff09;安全态势总览&a…

拿下挣值管理,软考集成你就成功了一半!

在备考软考集成的时候&#xff0c;挣值管理有多重要呢&#xff1f;挣值管理的计算题考的频率非常高&#xff0c;基本上每年都会考。 而且&#xff0c;计算题基本上都是20分左右&#xff0c;只要能在这道计算题上得满分&#xff0c;那么45分及格的考试就已经成功了一半。 今天…

豪华程度堪比飞机头等舱?奔驰在北美发布Tourrider系列巴士

今年三月&#xff0c;奔驰工厂附近出现了一台特殊的测试车。其突出的前保险杠以及竖置双风挡等特殊配置&#xff0c;都在暗示着它并非是为欧洲市场打造。 根据特征推测&#xff0c;这台车应该是为北美市场打造。 就在昨天&#xff0c;奔驰发布了旗下全新Tourrider系列豪华客车&…

python数据分析高效代码合集

文章目录 问题:我有5个dataframe,都包含time 列,如何将它们根据time列取交集,并保存到同一个excel的不同sheet页中。**df1,df2, df3, df4, df5,其也要用取交集后的time列**问题:我有5个dataframe,都包含time 列,如何将它们根据time列取交集,并保存到同一个excel的不同…

npm安装 node-sass

第一步&#xff1a;安装node-gyp 1.: npm install node-gyp -g2.: node-gyp install3.: npm install node-sass

QML24、常规组件StackView

1.简介与示例 StackView管理着view页面的生命周期,提供了页面的栈式导航。这些view页面可能有业务需要,根据业务需要,可以一级一级向深处跳转,根据当前view的状态与设定的情况,可能产生一个新view或者返回之前view 比如:注册账号分步骤,输入用户名,密码,点击下…

嵌入式单片机方向和Linux驱动开发方向哪个发展前景好?

嵌入式单片机方向和Linux驱动开发方向哪个发展前景好&#xff1f; 在某些平台上看到很多人鼓吹嵌入式Linux开发比单片机开发要好&#xff0c;让所有人都去做嵌入式Linux开发。说这种话的人大多数是嵌入式Linux的培训机构&#xff0c;或者是一开始就以嵌入式Linux入门的那一批人…

小型养猪场污水处理技术方案

诸城市鑫淼环保小编带大家了解一下小型养猪场污水处理技术方案 1.初步处理&#xff1a; 猪舍设立固液分离装置&#xff1a;这可以帮助将固体粪便与液体污水分开&#xff0c;减少进一步处理的难度和成本。 设置沉淀池&#xff1a;让分离后的污水在沉淀池内停留&#xff0c;使部分…

Windows更换主板后一直提示,你的pin码不可再用解决办法

最近惠普电脑主板坏了&#xff0c;到售后去维修电脑更换了个主板。 在经过了一系列的重新开机后&#xff0c;就直接卡在了“你的pin码不可再用”那里。 主要症状就是&#xff0c;一直点一直连不上windows的 microsoft账户&#xff0c;点完一会儿黑屏。然后就回到了一开头的“你…

飞书如何接入ChatGPT-打造个人智能问答助手实现无障碍交流

目录 前言 环境列表 1.飞书设置 2.克隆feishu-chatgpt项目 3.配置config.yaml文件 4.运行feishu-chatgpt项目 5.安装cpolar内网穿透 6.固定公网地址 7.机器人权限配置 8.创建版本 9.创建测试企业 10. 机器人测试 总结 前言 在飞书中创建chatGPT机器人并且对话&am…

python连接数据库的方式

python连接数据库的方式 pyzenith.connect&#xff08;&#xff09;函数就是连接数据库&#xff1b; exception.ScriptException&#xff08;&#xff09;这一句是自定义异常&#xff0c;可以不用我这个&#xff1b; finally里面还有一个try finally是有必要的&#xff0c;防止…