【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>
相关推荐
b***251128 分钟前
电池组PACK自动化生产线介绍|深圳比斯特自动化
运维·自动化
蓁蓁啊3 小时前
GIT使用SSH 多账户配置
运维·git·ssh
程序猿小三6 小时前
Linux下基于关键词文件搜索
linux·运维·服务器
虚拟指尖7 小时前
Ubuntu编译安装COLMAP【实测编译成功】
linux·运维·ubuntu
椎4958 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
刘某的Cloud8 小时前
parted磁盘管理
linux·运维·系统·parted
极验8 小时前
iPhone17实体卡槽消失?eSIM 普及下的安全挑战与应对
大数据·运维·安全
爱倒腾的老唐8 小时前
24、Linux 路由管理
linux·运维·网络
yannan201903138 小时前
Docker容器
运维·docker·容器
_清浅8 小时前
计算机网络【第六章-应用层】
运维·服务器·计算机网络