基于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,一经查实,立即删除!

相关文章

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

类初始化&#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;例如价格、库存、描述…

群晖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…

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

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

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

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

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

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

抖音汽车租赁小程序技术指南:开发高效便捷的租赁系统

为了更好地满足用户需求&#xff0c;抖音汽车租赁小程序成为一个备受关注的技术解决方案。本文将深入探讨开发高效便捷的汽车租赁系统所需的技术要点&#xff0c;为开发者提供一份实用的技术指南。 小程序架构选择 在搭建抖音汽车租赁小程序时&#xff0c;选择合适的小程序架构…

【SpringMVC】 参数传递

一.项目目录 SpringBoot项目创建之后会生成很多目录 删除不需要的这四个文件/目录 目录 二.Spring MVC 和 MVC Spring MVC(Spring Web MVC) Spring Web MVC 是⼀个 Web 框架 MVC : Model View Controller 它是一种思想 , 它把一个项目分成了三个部分. View视图层 界面显示…

python+pytest接口自动化:token关联登录这样做,阿里p8都直呼牛逼!!!

在PC端登录公司的后台管理系统或在手机上登录某个APP时&#xff0c;经常会发现登录成功后&#xff0c;返回参数中会包含token&#xff0c;它的值为一段较长的字符串&#xff0c;而后续去请求的请求头中都需要带上这个token作为参数&#xff0c;否则就提示需要先登录。 这其实就…

如何在Linux系统上检测GPU显存和使用情况?

如何在Linux系统上检测GPU显存和使用情况&#xff1f; 在Linux系统上&#xff0c;你可以使用一些命令行工具来检测GPU显存和使用情况。以下是一些常用的方法&#xff1a; 1. 使用nvidia-smi&#xff08;仅适用于NVIDIA GPU&#xff09; 如果你使用的是NVIDIA的显卡&#xff0…

Claude 发布2.1 版本,重大升级更新来看看有什么新功能?

11 月 23 日消息&#xff0c;OpenAI 竞争对手 Anthropic 日前推出了 Claude 2.1 聊天机器人及对应同名 AI 模型Claude 2.1&#xff0c;本文将总结Claude 2.1的主要功能。 增强的处理能力 上下文处理量大幅提升&#xff1a;Claude 2.1 现在能处理高达 200K上下文标记&#xff…

2、单片机及开发板介绍

单片机介绍 单片机&#xff0c;英文Micro Controller Unit,简称&#xff1a;MCU 内部集成&#xff1a;CPU、RAM(随机存储器)、ROM&#xff08;只读存储器&#xff09;、定时器、中断系统、通讯接口等 作用&#xff1a;信息采集&#xff08;传感器&#xff09;、处理&#xff0…

uniapp 适配部分IPhone手机底部安全距离

部分 IOS 机型&#xff0c;比如 Iphone X 的屏幕底部有一条“小黑线”区域&#xff0c;uniapp 项目中我们可以使用CSS的 env(safe-area-inset-bottom) 语句来自适配 IOS 的底部安全区域高度&#xff0c;这个语句会返回该机型的底部安全区域高度&#xff08;单位 px&#xff09;…

ffmpeg播放器实战(播放器流程)

1.流程图 1.main窗口创建程序窗口 程序窗口构造函数执行下面内容 2.开启播放 3.开启解码 4.开启渲染 5.反馈给ui 本文福利&#xff0c; 免费领取C音视频学习资料包学习路线大纲、技术视频/代码&#xff0c;内容包括&#xff08;音视频开发&#xff0c;面试题&#xff0c;FFmpeg…

Linux C++ 服务器端这条线怎么走?一年半能做出什么?

Linux C 服务器端这条线怎么走&#xff1f;一年半能做出什么&#xff1f; 既然你是在校学生&#xff0c;而且编程语言和数据结构的基础还不错&#xff0c;我认为应该在《操作系统》和《计算机体系结构》这两门课上下功夫&#xff0c;然后才去读编程方面的 APUE、UNP 等书。 最…

【深度学习】如何选择神经网络的超参数

1. 神经网络的超参数分类 神经网路中的超参数主要包括: 1. 学习率 η 2. 正则化参数 λ 3. 神经网络的层数 L 4. 每一个隐层中神经元的个数 j 5. 学习的回合数Epoch 6. 小批量数据 minibatch 的大小 7. 输出神经元的编码方式 8. 代价函数的选择 9. 权重初始化的方法 …

C语言--给定一个数组,把第一项的值减去第二项的值,第二项的值减去第三项的值,第三项的值减去第四项的值,依次类推。放到一个新的数组中,并打印新的数组

一.题目描述&#xff1a; 给定一个数组&#xff0c;把第一项的值减去第二项的值&#xff0c;第二项的值减去第三项的值&#xff0c;第三项的值减去第四项的值&#xff0c;依次类推。放到一个新的数组中&#xff0c;并打印新的数组。 比如&#xff1a;输入一个数组是5&#xff…