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

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

特性

  1. 支持单列中文字段名自动生成拼音声母组成的列名
  2. 支持两列(中英文空格分隔开,不区分中英文字段名前后顺序,可以多个空格隔开,仅识别前两列空格分开的字符串)的方式之自动生成el-table-column代码片段
  3. 支持键值对描述字段英文名和字段中文名,生成el-table-column代码片段

sgCreateTableColumn源码

<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>
        <div style="display: flex; margin-bottom: 10px">
          <el-select
            style="width: 150px"
            v-model="selectValue_type"
            @change="(d) => {}"
            :placeholder="`请选择数据内容类型`"
          >
            <el-option
              v-for="(select, index) in selectOptions_type"
              :key="index"
              :value="select.value"
              :label="select.label"
              :disabled="select.disabled"
            ></el-option>
          </el-select>
          <template v-if="selectValue_type == 2">
            <div style="display: flex; align-items: center; margin-left: 10px">
              <label style="margin-right: 5px">fieldName</label>
              <el-input
                style="width: 150px"
                ref="fieldName"
                v-model.trim="fieldNameValue"
                maxlength="20"
                :show-word-limit="false"
                :placeholder="`字段名`"
                @focus="$refs.fieldName.select()"
                clearable
              />
 
              <label style="margin-left: 10px; margin-right: 5px">keyName</label>
              <el-input
                style="width: 150px"
                ref="keyName"
                v-model.trim="keyNameValue"
                maxlength="20"
                :show-word-limit="false"
                :placeholder="`字段值名`"
                @focus="$refs.keyName.select()"
                clearable
              />
            </div>
          </template>
        </div>
        <el-input
          ref="textareaValue1"
          style="margin-bottom: 10px"
          type="textarea"
          :placeholder="
            this.selectOptions_type.find((v) => v.value == this.selectValue_type)
              .placeholder
          "
          v-model.trim="textareaValue1"
          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; flex-grow: 1"
          type="textarea"
          :placeholder="`请复制结果`"
          v-model.trim="textareaValue2"
          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 {
      selectOptions_type: [
        {
          value: 1,
          label: "文本",
          placeholder: `请粘贴字段中文名(或者:字段英文名+空格+字段中文名)`,
        },
        { value: 2, label: "json数据", placeholder: `请粘贴键值对描述json数组` },
      ],
 
      selectValue_type: 1,
 
      fieldNameValue: `fieldName`,
      keyNameValue: `fieldName_TEXT`,
 
      textareaValue1: "",
      textareaValue2: "",
    };
  },
  watch: {
    textareaValue1(newValue, oldValue) {
      newValue && this.createResult(newValue);
    },
  },
  methods: {
    createResult(d) {
      let r = [];
      switch (this.selectValue_type) {
        case 1:
          let texts = this.textareaValue1
            .split("\n")
            .map((v) => v.split("\t").join("").trim());
          texts = texts.filter((v, i, ar) => v !== ``);
 
          r = texts.map((v) => {
            let strings = v.replace(/\s+/g, ` `).split(` `); //用空格分隔开两列字段名
            let label = ``;
            let prop = ``;
            // 如果是多列内容
            if (strings.length > 1) {
              // 如果第一列的字符串是中文
              if (this.$g.checkEverything(`cn`, strings[0])) {
                label = strings[0];
                prop = strings[1];
              } else {
                label = strings[1];
                prop = strings[0];
              }
            } else {
              // 如果是单列内容
              prop = pinyin.getCamelChars(v);
              label = v;
            }
            let r = `<el-table-column prop="${prop}" label="${label}" show-overflow-tooltip />`;
            return r;
          });
 
          break;
        case 2:
          if (this.fieldNameValue && this.keyNameValue) {
          } else {
            return this.$message.error(`fieldName和keyName都要填写`);
          }
          if (this.$g.json.isJSON(this.textareaValue1)) {
            let arr = JSON.parse(this.textareaValue1);
 
            r = arr.map((v) => {
              let prop = v[this.fieldNameValue];
              let label = v[this.keyNameValue];
              let r = `<el-table-column prop="${prop}" label="${label}" show-overflow-tooltip />`;
              return r;
            });
          } else {
            return this.$message.error(`请输入正确的json格式的对象数组内容`);
          }
 
          break;
      }
 
      this.textareaValue2 = r.join("\n");
 
      this.copyResult(); //自动复制生成结果
    },
    copyResult(d) {
      this.$g.copy(this.textareaValue2, true);
      this.$nextTick(() => {
        this.$refs.textareaValue1.select();
      });
    },
  },
};
</script>
 
<style lang="scss" scoped>
.sgCreateTableColumn {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  padding: 20px;
 
  .sg-head {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
  }
 
  .sg-container {
    display: flex;
    flex-wrap: nowrap;
    height: calc(100vh - 70px);
 
    & > .sg-start {
      width: calc(50% - 20px);
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
 
    & > .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);
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
 
    >>> .el-textarea {
      width: 100%;
      height: 100%;
      textarea {
        width: 100%;
        height: 100%;
        max-height: revert;
      }
    }
  }
}
</style>


相关文章
|
4天前
|
运维 监控 Devops
基础设施即代码(IaC):自动化运维的新纪元
【6月更文挑战第21天】基础设施即代码(IaC)是将基础设施配置转为代码,实现自动化和标准化运维的实践。它通过文本文件描述基础设施,保证重复性、一致性和自动化部署。IaC提升效率,降低成本,加速产品上市,增强安全性和可移植性,在配置管理、环境管理、CI/CD及监控告警中发挥关键作用,推动DevOps和云时代的创新。
|
6天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
26 5
|
13天前
|
JavaScript Java 测试技术
《手把手教你》系列技巧篇(七十一)-java+ selenium自动化测试-自定义类解决元素同步问题(详解教程)
【6月更文挑战第12天】本文介绍了如何创建一个自定义类库来解决自动化测试中的元素同步问题。作者指出,大部分错误源于元素因时间不同步而引发,为此提供了一种解决方案。在项目实践中,首先在`library`包下创建名为`MyWait`的类,包含一个方法`isElementPresent`,该方法通过循环尝试并等待指定元素出现,避免了直接使用时间等待可能导致的不准确性。之后,在测试类中调用此自定义方法,成功实现了元素同步。代码示例展示了如何在Java+Selenium自动化测试中应用这个自定义类。
31 2
|
13天前
|
前端开发 JavaScript
HTML情人节爱心代码
HTML情人节爱心代码
18 2
|
3天前
爱心代码---html代码合集他来咯(2)
爱心代码---html代码合集他来咯
|
3天前
爱心代码---html代码合集他来咯(1)
爱心代码---html代码合集他来咯
11 0
|
12天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
23 0
|
12天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
17 0
|
3天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
1天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别