【sgCreateTableData】自定义小工具:敏捷开发→自动化生成表格列数据数组[基于el-table]

源码

<template><!-- 
前往https://blog.csdn.net/qq_37860634/article/details/136141769
查看使用说明
--><div :class="$options.name"><div class="sg-head">表格数据生成工具</div><div class="sg-container"><div class="sg-start"><div style="margin-bottom: 10px">字段中文名</div><el-inputstyle="margin-bottom: 10px"type="textarea":placeholder="`请粘贴字段中文名`"v-model="textareaValue1":rows="30"show-word-limit/><el-button type="primary" @click="createResult">生成表格数据</el-button></div><div class="sg-center">→</div><div class="sg-end"><div style="margin-bottom: 10px">生成结果</div><el-inputstyle="margin-bottom: 10px"type="textarea":placeholder="`请复制结果`"v-model="textareaValue2":rows="30"show-word-limit/><el-button type="primary" @click="copyResult">复制</el-button></div></div></div>
</template><script>
import pinyin from "@/js/pinyin";
export default {name: "sgCreateTableData",data() {return {textareaValue1: "",textareaValue2: "",};},watch: {textareaValue1(newValue, oldValue) {newValue && this.createResult(newValue);},},methods: {createResult(d) {let texts = this.textareaValue1.split("\n").map((v) => v.split("\t").join(""));let rowData = {};texts.map((v) => {let cn_col = v;let py_col = pinyin.getCamelChars(v);rowData[py_col] = cn_col;});let data = [...Array(5)].map((v) => rowData);this.textareaValue2 = JSON.stringify(data, null, 2);this.copyResult(); //自动复制生成结果},copyResult(d) {this.$g.copy(this.textareaValue2, true);},},
};
</script><style lang="scss" scoped>
.sgCreateTableData {width: 100%;height: 100%;position: absolute;box-sizing: border-box;padding: 20px;.sg-head {display: flex;// justify-content: center;align-items: center;font-size: 24px;font-weight: bold;color: #409eff;margin-bottom: 10px;}.sg-container {display: flex;flex-wrap: nowrap;& > .sg-start {width: calc(50% - 20px);flex-shrink: 0;}& > .sg-center {display: flex;justify-content: center;align-items: center;flex-grow: 1;margin: 0 10px;font-size: 24px;color: #409eff;font-weight: bold;}& > .sg-end {width: calc(50% - 20px);flex-shrink: 0;}>>> textarea {max-height: revert;height: calc(100vh - 200px);word-wrap: break-word;word-break: break-all;white-space: break-spaces;}}
}
</style>

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

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

相关文章

政安晨:【完全零基础】认知人工智能【机器学习】的【神经网络】 【超级简单】(一)

开个头 很多小伙伴们很想亲近人工智能与机器学习领域&#xff0c;然而这个领域里的核心理论、算法、工具给人感觉都太过“高冷”&#xff0c;让很多小伙伴们望而却步&#xff0c;导致一直无法入门。 如何捅破这层窗户纸&#xff1f; 让高冷的不再高冷&#xff0c;让神秘的不…

Windows环境部署nginx 文件服务器

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 在Windows环境下使用nginx部署简单的文件服务器 一、版本 1. Windows 使用版本 2. nginx 使用版本 选择Mainline Version版本 二、nginx配置 1. 下载 https://nginx.org/en/download.…

HTML-多媒体嵌入-MDN文档学习笔记

HTML-多媒体与嵌入 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever MDN中文官网 HTML-中的图片 将图片放入网页 可以使用<img/>来将图片嵌入网页&#xff0c;它是一个空元素&#xff0c;最少只需src属性即可工作 <img src"图片链接"…

Linux操作系统基础(十三):Linux安装、卸载MySQL

文章目录 Linux安装、卸载MySQL 一、卸载系统自带的mariadb-lib 二、上传安装包并解压 三、按顺序安装 错误1: 错误2: 错误3: 错误4: 四、初始化数据库 五、目录授权&#xff0c;否则启动失败 六、启动msyql服务 七、查看msyql服务的状态 八、在/var/log/mysqld.l…

算法——数论——同余

目录 同余 一、试题 算法训练 同余方程 同余 同余使人们能够用等式的形式简洁地描述整除关系同余&#xff1a;若 m&#xff08;正整数&#xff09;&#xff0c;a 和 b 是整数&#xff0c;a%mb%m&#xff0c;或(a-b)%m0&#xff0c;记为 a b(mod m)求解一元线性同余方程等价于…

解决ubuntu登录密码问题

解决ubuntu登录密码问题 不要随便删除密码&#xff0c;不要随便改密码&#xff0c;很容导致密码过期&#xff0c;或者密码无效。参考了很多人的做法&#xff0c;都没有得到解决。下面的过程&#xff0c;够详细了&#xff0c;我就是这么搞好的。 1、重启虚拟机&#xff0c;不停…

Linux第59步_“buildroot”构建根文件系统第1步_生成rootfs.tar和rootfs.ext4以及通过nfs下载测试

学习安装“buildroot”&#xff0c;通过配置构建根文件系统&#xff0c;编译生成rootfs.tar和rootfs.ext4&#xff0c;以及通过nfs下载测试。 1、了解学习目的&#xff1a; 1)、获取“buildroot”安装包&#xff1b; 2)、使用“buildroot”构建根文件系统&#xff1b; 3)、…

相机图像质量研究(31)常见问题总结:图像处理对成像的影响--图像差

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

一起学量化之Aroon指标

Aroon指标是由Tushar Chande于1995年开发的技术分析工具,旨在识别股票是否处于趋势中及趋势的强度。它通过分析股票价格在一定周期内创下的新高和新低来预测趋势的变化,这基于一种观念:强势趋势通常伴随着频繁的新高或新低。 1. Aroon指标的组成 Aroon指标由两个部分组成:…

ADC--模拟量转换成数字量

目录 一、ADC硬件组成七大部分&#xff1a; 二、单次转换&#xff0c;连续转换&#xff0c;不连续采样模式&#xff0c;扫描模式区别 1、举例(5种组合情况) 2、模拟看门狗中断的作用&#xff1a; 三、MCU使用ADC步骤 一、ADC硬件组成七大部分&#xff1a; ①输入电压&#…

Java实战:构建智能工作量统计系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

如何清除谷歌浏览器的缓存?这里有详细步骤

如果你想解决加载或格式化问题&#xff0c;以改善你在谷歌Chrome上的浏览体验&#xff0c;那么清除缓存和cookie是一个很好的开始。以下是删除它们的方式和操作。 删除缓存和cookie时会发生什么 当你访问一个网站时&#xff0c;它有时会保存&#xff08;或记住&#xff09;某…

DS:八大排序之堆排序、冒泡排序、快速排序

创作不易&#xff0c;友友们给个三连吧&#xff01;&#xff01; 一、堆排序 堆排序已经在博主关于堆的实现过程中详细的讲过了&#xff0c;大家可以直接去看&#xff0c;很详细,这边不介绍了 DS&#xff1a;二叉树的顺序结构及堆的实现-CSDN博客 直接上代码&#xff1a; …

算法||实现典型数据结构的查找、添加和删除数据 并分析其时间和空间复杂度

实现典型数据结构的查找、添加和删除数据 并分析其时间和空间复杂度 线性结构&#xff1a; 数组&#xff1a;是一种线性表数据结构&#xff0c;它用一组连续的内存空间&#xff0c;来存储一组具有相同类型的数据。 查找数据 &#xff1a;随机访问 流程图 /** 查询元素下标…

QML | 属性特性(property)

一、属性特性 属性是对象的一个特性,可以分配一个静态的值,也可以绑定一个动态表达式。属性的值可以被其他对象读取。一般而言,属性的值也可以被其他对象修改,除非显式声明不允许这么做,也就是声明为只读属性。 1.定义属性特性 属性可以在C++中通过注册一个类的Q_PROPERT…

anaconda安装路径默认在D盘,但安装环境的envs路径跑到C盘,修改为D盘

安装的anaconda环境&#xff0c;路径是在anaconda安装目录下的envs中&#xff08;D:\APPFile\Anaconda3\envs&#xff09;&#xff0c;然而&#xff0c;这次创建的却是在 C:\Users\xxx.conda\envs 中。 首先&#xff0c;找到用户目录下的.condarc文件&#xff08;C:\Users\use…

力扣题目训练(12)

2024年2月5日力扣题目训练 2024年2月5日力扣题目训练476. 数字的补数482. 密钥格式化485. 最大连续 1 的个数148. 排序链表164. 最大间距 2024年2月5日力扣题目训练 2024年2月5日第十二天编程训练&#xff0c;今天主要是进行一些题训练&#xff0c;包括简单题3道、中等题2道和…

项目第一次git commit后如何撤销

问题描述&#xff1a; # 1. 新建gitcode目录&#xff0c;然后在目录下 git init# 2. 用idea打开目录后&#xff0c;新建.gitignore文件后 git add .git commit -m "init project"git log# 3. 就出现如下图情况目的&#xff1a;向撤销该次代码提交 # 仅撤销 git com…

Stable Diffusion教程——常用插件安装与测试(一)

前言 随着Stable Diffusion不断演进&#xff0c;越来越多的开发者开始涉足插件开发。尽管网络上存在大量教程&#xff0c;但它们通常零散分布&#xff0c;逐个学习和查找非常耗时&#xff0c;使人感觉每天都在劳累思考。这里总结了Stable Diffusion常用的插件安装与测试方法。…

表的操作【mysql数据库】

目录 一、创建表 二、查看表 三、修改表 改表名&#xff1a; 新增一列&#xff1a; 修改某列的属性&#xff1a; 删除某列&#xff1a; 改列名 四、删除表 一、创建表 二、查看表 desc&#xff1a;查看表的详细信息 查看建表时的详细信息&#xff1a; 三、修改表 改表…