＜ 在elementUi中，实现el-input组件封装，适用于动态存储为数组 ＞

---

👉 前言

在前端开发时，我们偶尔需要在一个表单字段，存储为字符串数组，且需要动态控制存储大小。这就需要封装成一个小组件了，今天小温分享一个存储数组字符串组件。

原理较为简单，直接上源码吧！

👉 一、实现案例

> HTML模板

<el-col :span="24" style="height: auto!important;">
	<el-form-item label="计划开展内容" prop="jhkznr">
	   <div class="swiperBox">
	     <div
	       class="itemBox"
	       v-for="(item, index) in form.jhkznr"
	       :key="index"
	     >
	       <span class="input_box">
	         <el-input
	           resize="none"
	           type="textarea"
	           :autosize="{ minRows: 1, maxRows: 1}"
	           :placeholder="'请输入内容 <' + (index + 1) + '>'"
	           v-model="form.jhkznr[index]">
	         </el-input>
	       </span>
	       <span
	         class="btn_box"
	         v-if="form.jhkznr.length === (index + 1)"
	       >
	         <el-button
	           @click="form.jhkznr.push('')"
	           :plain="$root.themeHomeChange === '1'">增加</el-button>
	         <el-button
	           @click="form.jhkznr.pop()"
	           type="danger"
	           :plain="$root.themeHomeChange === '1'"
	           :disabled="form.jhkznr.length <= 1"
	         >删除</el-button>
	       </span>
	     </div>
	   </div>
	 </el-form-item>
</el-col>

form表单校验

var check_jhkznr = (rule, value, callback) => {
	if (value.length !== 0) {
		if(value.some(item => {
			return item.trim() == '';
		})) {
			return callback(new Error('请填写完整计划开展内容'));
		} else {
			return callback();
		}
	} else {
		return callback(new Error('数据出现错误，请重新打开'));
	}
};

jhkznr: [
	{ required: true, validator: check_jhkznr, trigger: 'blur' }
],

CSS样式

.el-col {
	/* 这个是其他表单项的高度，这个封装的组件，要自动高度 */
	height: 62px;
	margin-bottom: 13px;
	padding-top: 32px;
	position: relative;
	.swiperBox {
		width: calc(100%);
		min-height: 32px;
		max-height: 126px;
		overflow-y: auto;
		.itemBox {
			width: 100%;
			margin-bottom: 10px;
			display: flex;
			.input_box {
				width: 80%;
			}
			.btn_box {
				width: calc(20% - 20px);
				padding: 0 10px;
				display: flex;
				.el-button {
					width: 45%;
					margin: 0 auto;
				}
			}
		}
	}
}

案例较为简单，实际运用可以再加优化。

👉 二、效果演示

---

往期内容 💨

🔥 ＜ 今日份知识点：web常见的攻击方式（网络攻击）有哪些？如何预防？如何防御呢 ？ ＞

🔥 ＜ 今日份小技巧：CSS文本超出指定条件以省略号代替 ＞

🔥 ＜ 可视化图表技巧：实现发光（荧光）折线图 ＞

🔥 ＜ 性能提升 Get √ ：如何理解 “ 回流 ” 与 “ 重绘 ” ？如何合理的减少其出现呢 ？ ＞