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