【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>
相关推荐
漫谈网络5 分钟前
基于 Netmiko 的网络设备自动化操作
运维·自动化·netdevops·netmiko
꧁坚持很酷꧂32 分钟前
Linux Ubuntu18.04下安装Qt Craeator 5.12.9(图文详解)
linux·运维·qt
小诸葛的博客2 小时前
详解Linux中的定时任务管理工具crond
linux·运维·chrome
一默19912 小时前
CentOS 7.9升级OpenSSH到9.9p2
linux·运维·centos
BranH3 小时前
Linux系统中命令设定临时IP
linux·运维·服务器
极小狐3 小时前
极狐GitLab 项目功能和权限解读
运维·git·安全·gitlab·极狐gitlab
宁酱醇3 小时前
GitLab_密钥生成(SSH-key)
运维·ssh·gitlab
秋风起,再归来~3 小时前
【Linux庖丁解牛】—进程优先级!
linux·运维·服务器
Lalolander4 小时前
设备制造行业如何避免项目管理混乱?
运维·制造·工程项目管理·四算一控·epc·环保设备工程·设备制造
LucianaiB4 小时前
【金仓数据库征文】_AI 赋能数据库运维:金仓KES的智能化未来
运维·数据库·人工智能·金仓数据库 2025 征文·数据库平替用金仓