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

源码

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(""));
      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>
相关推荐
CSJ200203141 小时前
LUMP+NFS架构的Discuz论坛部署
运维·架构
测试开发技术1 小时前
如何在 Pytest 中调用其他用例返回的接口参数?
面试·自动化·pytest·接口·接口测试·api测试
不知疲倦的仄仄2 小时前
2025最新版Docker讲解/面试/命令/容器化技术
运维·docker·容器
程序员黄老师2 小时前
Ubuntu 24.04上安装 Intelligent Pinyin 中文输入法
linux·运维·ubuntu
chao_7892 小时前
Selenium 自动化实战技巧【selenium】
自动化测试·selenium·算法·自动化
Enti7c2 小时前
什么是void,什么时候使用void类型?never和void的区别
linux·运维·ubuntu
宇钶宇夕3 小时前
S7-1200 系列 PLC 中 SCL 语言的 PEEK 和 POKE 指令使用详解
运维·服务器·数据库·程序人生·自动化
A小码4 小时前
软件开发那些基础事儿:需求、模型与生命周期
运维·服务器
Linux运维技术栈4 小时前
企业级配置:Azure 邮件与 Cloudflare 域名解析的安全验证落地详解
运维·安全·flask·azure·cloudflare
这儿有一堆花5 小时前
Nginx服务器集群:横向扩展与集群解决方案
运维·服务器·nginx