dev类似于excel的数据编辑

 其实这个不是我最后的结果,只是中间demo,因为我的场景数据量很大,2w左右,有数据合并,我更倾向于el-table是实现,但不想el-input一直显示,想用if-else 去做隐藏,但是用type=textarea发现高度适配有点问题,其中做了两种实验:
(1)失去焦点和获取焦点获取容器的高度再赋值给 textarea
(2)textarea点位设置  position: absolute设置显示和隐藏样式,但是同样发现需要很多歌el-input做显示隐藏 ,但是我不想这么处理。
(3)用dev去实现el-table,用flex 或grid 布局去实现
以下为dev用flex去实现的方法

<template><div class="page"><div class="table table-input-box"><divstyle="flex: 1"v-for="(item, index) in tableData":key="index"class="textarea-item"><div class="textarea-row"><divstyle="flex: 1"@click.prevent="inputBlurHandler($event, item)"class="column-item item1"><el-inputclass="item__input"v-model="tableData[index].date"type="textarea"resize="none"placeholder="请输入内容"autosize></el-input></div><divstyle="flex: 1"@click.prevent="inputBlurHandler($event, item)"class="column-item item2"><el-inputclass="item__input"v-model="tableData[index].name"type="textarea"resize="none"placeholder="请输入内容"autosize></el-input></div></div></div></div></div>
</template><script>
export default {name: "Batch",data() {return {// 下拉选项showedit: false,// 表格数据tableData: [],// 需要编辑的属性editProp: ["date", "name"],columns: [{ label: "流程顺序", prop: "date", width: 100, align: "center" },{ label: "流程名称", prop: "name", width: null },],current_Y_X: null,};},computed: {foodLabel() {return (val) => {return this.options.find((o) => o.value === val).label;};},},mounted() {this.tableData = [{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好.",name: "王小虎",food: "选项5",},{date: "-02",name: "王小虎",food: "选项5",},{date: "-02",name: "王小虎",food: "选项5",},{date: "2016-05-04",name: "王小虎",food: "选项5",},{date: "2016-05-01",name: "王小虎",food: "选项5",},{date: "2016-05-03",name: "王小虎",food: "选项5",},];},methods: {inputBlurHandler(event, data) {const span = event.target;if (span.className.includes("column-item")) {span.children[0].children[0].focus();}},},
};
</script><style lang="scss">
.textarea-item {border-bottom: #f1f1f1 1px solid;.textarea-row {display: flex;justify-content: start;flex-wrap: nowrap;.column-item {&:first-child {border-right: #f1f1f1 1px solid;}.item__input {padding: 5px;textarea {background-color: rebeccapurple;width: 100%;border: none; /* 去除边框 */background-color: transparent; /* 透明背景 */padding: 0 !important;outline: none; /* 去除聚焦时的轮廓线 */margin: 0; /* 去除外边距 */font-size: 12px !important; /* 设置字体大小,与 p 标签一致 */color: inherit; /* 继承父元素的字体颜色 */line-height: 1;// white-space: pre-wrap;text-align: start;font-family: Avenir, Helvetica, Arial, sans-serif !important;overflow: hidden;// word-break: break-all !important;// font-family: youjian !important;}}}}
}
.table-input-box {overflow-y: auto;
}
</style>

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

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

相关文章

uniapp对接unipush 1.0 ios/android

简介 实现方法 是uniapp官网推荐的 unipush-v1 文档配置具体看 uni-app官网 配置好了之后 代码实现 前端代码 前端的主要任务是监听 监听到title content 创建消息推送 安卓 可以收到在线消息并且自动弹出消息 IOS 可以监听到在线消息但是需要手动推送 以下代码app初始…

【WRF-Urban】输入空间分布人为热排放数据的WRF运行全过程总结

目录 数据准备检查新增变量配置(如果有)WPS预处理修改namelist.wpsStep1: geogridStep2: ungribStep3: metgridWRF运行修改namelist.input调试namelist.input运行./real.exe运行./wrf.exe参考WRF模型的基本流程如下: 数据准备 空间分布热排放数据下载及制备可参见另一博客…

JavaSE——绘图入门

一、Java绘图坐标体系 下图说明了Java坐标系&#xff0c;坐标原地位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直…

初学stm32 --- 系统时钟配置

众所周知&#xff0c;时钟系统是 CPU 的脉搏&#xff0c;就像人的心跳一样。所以时钟系统的重要性就不言而喻了。 STM32 的时钟系统比较复杂&#xff0c;不像简单的 51 单片机一个系统时钟就可以解决一切。于是有人要问&#xff0c;采用一个系统时钟不是很简单吗&#xff1f;为…

FM-CLIP: Flexible Modal CLIP for Face Anti-Spoofing

“FM-CLIP: Flexible Modal CLIP for Face Anti-Spoofing”由澳门科技大学、中国科学院等单位的Ajian Liu、Hui Ma等人撰写。文章提出了一种名为FM-CLIP的新型灵活模态人脸反欺诈(FAS)方法,通过利用文本特征动态调整视觉特征以实现模态独立性,在多模态数据集上取得了优于现…

进网许可认证、交换路由设备检测项目更新25年1月起

实施时间 2025年1月1日起实施 涉及设备范围 核心路由器、边缘路由器、以太网交换机、三层交换机、宽带网络接入服务器&#xff08;BNAS&#xff09; 新增检测依据 GBT41266-2022网络关键设备安全检测方法交换机设备 GBT41267-2022网络关键设备安全技术要求交换机设备 GB/…

lshw学习——简单介绍

文章目录 简介核心结构扫描设备原理scan_abiscan_burnerscan_cdromscan_cpufreqscan_cpuidscan_cpuinfoscan_device_treescan_diskscan_displayscan_dmiscan_fatscan_fbscan_graphicsscan_idescan_ideraidscan_inputscan_isapnpscan_lvmscan_memoryscan_mmcscan_mountsscan_net…

k8s总结

1、k8s是部署、拓展、管理容器的容器编排引擎。可根据负载的变化动态增加或缩减节点保证系统的高可用。 2、ks8s核心组件&#xff1a;node是节点&#xff08;可以是物理机也可以是虚拟机&#xff09;、pod最小的调度单位&#xff0c;是容器的抽象&#xff0c;有svc管理容器网络…

白嫖内网穿透之神卓互联Linux安装教程(树莓派)

最近家里有一个树莓派&#xff0c;捣鼓来去不知道干嘛&#xff0c;于是打算作为内网穿透盒子用&#xff0c;于是百度了一下&#xff0c;发现神卓互联还不错&#xff0c;可以让外网请求通过各种复杂的路由和防火墙访问到内网的服务。 以下是在Linux树莓派系统上安装神卓互联客户…

【测试面试篇1】测试开发与开发|selenium实现自动化测试|设计测试用例|常见的测试方法|开发不认可提测试的bug该怎么办

目录 1.选择走测试为什么还要学这么多的开发知识&#xff1f; 2.为什么选择软件测试开发岗位而不是软件开发岗位&#xff1f; 3.个人的职业规划是什么&#xff1f; 4.测试中遇到的问题如何进行解决&#xff1f; 5.对自己的项目做过哪些测试工作&#xff1f; 6.描述selenium…

Ansible 批量管理华为 CE 交换机

注&#xff1a;本文为 “Ansible 管理华为 CE 交换机” 相关文章合辑。 使用 CloudEngine - Ansible 批量管理华为 CE 交换机 wsf535 IP 属地&#xff1a;贵州 2018.02.05 15:26:05 总体介绍 Ansible 是一个开源的自动化运维工具&#xff0c;AnsibleWorks 成立于 2012 年&a…

防火墙(RHCE)

1、什么是防火墙 防火墙&#xff1a;防火墙是位于内部网和外部网之间的屏障&#xff0c;它按照系统管理员预先定义好的规则来控制数据包 的进出。 防火墙又可以分为硬件防火墙与软件防火墙。硬件防火墙是由厂商设计好的主机硬件&#xff0c;这台硬件防火墙 的操作系统主要以提…

线性代数基础与应用:基底 (Basis) 与现金流及单期贷款模型(中英双语)

具体请参考&#xff1a;https://web.stanford.edu/~boyd/vmls/ 下面的例子来源于这本书。 线性代数基础与应用&#xff1a;基底 (Basis) 与现金流及单期贷款模型 在线性代数中&#xff0c;基底&#xff08;Basis&#xff09;是一个重要的概念&#xff0c;广泛应用于信号处理、…

【安当产品应用案例100集】032-重塑企业SaaS平台的PostgreSQL凭据管理体系

一、案例背景 在本次案例分享中&#xff0c;一家为旅行社提供SaaS服务的技术服务商&#xff0c;其依赖PostgreSQL作为其核心数据存储解决方案&#xff0c;并且在阿里云和内网环境中均部署了相关服务与数据库实例。随着业务的发展和技术团队规模的扩大&#xff0c;当前的数据库…

路径规划之启发式算法之二十:麻雀搜索算法(Sparrow Search Algorithm,SSA)

麻雀搜索算法(Sparrow Search Algorithm,SSA)是一种受麻雀觅食和反捕食行为启发的新型的群智能优化算法,它模拟了麻雀种群的觅食行为和反捕食行为的生物学群体特征。该算法由薛建凯在2020年首次提出,旨在解决全局优化问题,具有求解精度高、效率高等特点。 一、算法原理 S…

Vue 404页面增加宝贝回家公益广告

关于404公益 https://www.dnpw.org/cn/pa-notfound.html 404公益项目主要以寻找走失的孩子为题材&#xff08;官方demo: https://cdn.dnpw.org/404/v1/demo.html&#xff09; 只需在网页中插入如下代码&#xff0c;即可加入404公益&#xff0c;为寻找走失的孩子出一份力&…

threejs——无人机概念切割效果

主要技术采用着色器的切割渲染,和之前写的风车可视化的文章不同,这次的切割效果是在着色器的基础上实现的,并新增了很多可调节的变量,兄弟们,走曲儿~ 线上演示地址,点击体验 源码下载地址,点击下载 正文 从图中大概可以看出以下信息,一个由线组成的无人机模型,一个由…

python实现Word转PDF(comtypes、win32com、docx2pdf)

目录 使用 comtypes 或 win32com 使用docx2pdf 使用 comtypes 或 win32com 支持docx和doc格式的文档转PDF&#xff0c;comtypes与win32com底层调用一样&#xff0c;使用方法也一样。保存文件时相当于调用了office中的另存为。只需要修改SaveAs中的FileFormat参数值即可转为对…

双指针---和为s的两个数字

这里写自定义目录标题 题目链接问题分析代码解决执行用时 题目链接 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 问题分析 暴⼒解法&#xff0c;会超时 &#xff08;两层…

整合 Knife4j 于 Spring Cloud 网关:实现跨服务的 API 文档统一展示

&#x1f3af;导读&#xff1a;本文档概述了构建和配置基于JDK 17、Spring Boot 3.0.7及Spring Cloud 2022.0.3的微服务系统&#xff0c;特别聚焦于集成Knife4j以增强API文档管理和接口测试功能。文中详细介绍了如何在Spring Boot应用中添加Knife4j依赖、配置Swagger UI路径和A…