【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]

这篇具有很好参考价值的文章主要介绍了【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column],Vue.js,自动化,运维文章来源地址https://www.toymoban.com/news/detail-828277.html

源码

<template>
  <!-- 
前往https://blog.csdn.net/qq_37860634/article/details/136126479
查看使用说明
-->
  <div :class="$options.name">
    <div class="sg-head">表格列生成工具</div>
    <div class="sg-container">
      <div class="sg-start">
        <div style="margin-bottom: 10px">字段中文名</div>
        <el-input
          style="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-input
          style="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: "sgCreateTableColumn",
  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("").trim());
      texts = texts.filter((v, i, ar) => v !== ``);
      
      let pinyinTexts = texts.map((v) => {
        let cn_col = v;
        let py_col = pinyin.getCamelChars(v);
        let r = `<el-table-column prop="${py_col}" label="${cn_col}" show-overflow-tooltip />`;
        return r;
      });

      this.textareaValue2 = pinyinTexts.join("\n");

      this.copyResult(); //自动复制生成结果
    },
    copyResult(d) {
      this.$g.copy(this.textareaValue2, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.sgCreateTableColumn {
  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>

到了这里,关于【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 敏捷测试自动化

    目录 前言: 敏捷宣言 敏捷软件开发VS传统方法 敏捷云服务

    2024年02月15日
    浏览(55)
  • Hamibo自动化手机工具的使用及介绍【自定义代码解析】

    Hamibot 是一款开源的自动化手机测试脚本项目,是一款 Android 平台 JavaScript 自动化工具,无需 root,无需编程基础,在脚本市场内安装脚本即可运行。适用于安卓系统的自动化工具,能操控任意 APP,实现自动化操作,提高工作效率,可以允许脚本查询在手机上完美的运行,兼

    2024年02月09日
    浏览(38)
  • 敏捷测试和DevOpes自动化测试的区别

    敏捷测试和DevOps自动化测试在以下方面存在区别👇 1️⃣目标 🎈敏捷测试的主要目标是提供快速的反馈和持续的改进,以便在开发过程中尽早发现和解决问题,从而提高软件的质量和可靠性。 🌈DevOps自动化测试的目标是提高软件的交付速度和质量,通过自动化测试流程来减

    2024年01月18日
    浏览(47)
  • 以效率为导向:用ChatGPT和HttpRunner实现敏捷自动化测试(二)

    在上一篇文章: 利用ChatGPT提升测试工作效率——测试工程师的新利器(一)中,我们提到了如何通过chatGPT生成单接口测试用例,然后再让chatGPT去根据测试用例去生成接口自动化脚本。本篇文章将详细讲解一下我们团队内部在遇到业务痛点时如何利用Httprunner框架进行接口自动化

    2024年02月08日
    浏览(46)
  • 【测试开发】第五节.测试——自动化测试(Selenium工具)

    作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:Java测试开发 每日一句: 人的一生,可以有所作为的时机只有一次,那就是现在!!! 前言 一、自动化测试的概念以及分类 二、Selenium—web自动化测试工具 2.1 自动化测试的一些前置工作 2.2 第一个自动化实例

    2024年02月04日
    浏览(62)
  • 3D开发工具HOOPS助力Eleven Dynamics加速开发QA自动化平台

    Nexos平台提供强大的可视化功能,并将整体测量时间减少80%。 2021年10月19日,俄勒冈州本德市(Newswire.com)——工程软件开发工具包的领先供应商Tech Soft 3D今天宣布,Eleven Dynamics是一家位于瑞士的初创公司,致力于通过消除目前围绕该流程的大部分僵化和复杂性,使汽车公司

    2024年02月07日
    浏览(39)
  • C#自动化采集工具-1.采集布局设计与UI开发框架

    这里UI我们用.NET中较为容易上手的winform来开发,如图,因为对于工具的界面并没有太多花哨的需求,满足使用即可。界面上方是导入导出等一系列全局操作功能,中间是配置信息,下方是日志控制台,中间配置信息又分为左右,左边是树形采集列表,右边是点击列表节点对应

    2023年04月15日
    浏览(38)
  • Python 微信自动化工具开发系列01_自动获取微信聊天信息(2023年9月可用)

    使用Python3的第三方库 wxauto , 它适用于Windows的微信客户端 官网: https://github.com/cluic/wxauto 这边使用 wxauto 来进行开发,而不是 itchat ,原因如下 itchat 都是之前的教程, 本质上是用的微信的网页端的接口来进行数据交互的。 如果你想要使用 itchat 的代码的话, 1、先测试下你的

    2024年02月07日
    浏览(49)
  • 【墙裂推荐!】十款开源测试开发工具(自动化、性能、造数据、流量复制)​

    目录 1、AutoMeter-API 自动化测试平台 2、QA Wolf 浏览器自动化测试工具 3、Mimesis 用于 Python 的高性能虚假数据生成器 4、Ddosify 高性能负载测试工具 5、AutoCannon HTTP/1.1 基准测试工具 6、Sharingan 流量录制回放工具 7、randdata 随机测试数据生成工具 8、DrissionPage WEB 自动化测试集成工具

    2024年02月06日
    浏览(52)
  • 十款开源测试开发工具推荐(自动化、性能、混沌测试、造数据、流量复制)

    在本篇文章中,我将给大家推荐 10 款日常工作中经常用到的测试开发工具神器,涵盖了自动化测试、性能压测、流量复制、混沌测试、造数据等。 AutoMeter 是一款针对分布式服务,微服务 API 做功能和性能一体化的自动化测试平台,一站式提供发布单元,API,环境,用例,前

    2024年02月15日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包