elementUI Vue点击按钮动态添加一行输入框。在实际开发中，我们需要对一个事物做未知长度的相关属性信息，比如：一台打印机需要添加不同的属性如打印方式，分辨率、打印宽度、点密度等信息，那时我们需要做一个动态的输入框，那么element 怎么自动增加输入框组：<el-input v-model="input" placeholder="请输入内容"></el-input>
原理很简单，我们用v-for循环渲染一个数组里的数据，点击时添加一条空数据进入数组就可以多渲染出一个组件了。
实例代码：v-model双向绑定，handleDelExtend来删除数组数据来渲染模板，handleChangeExtend判断或更新数据值，handleAddExtend添加一个空数据来渲染一行新的输入框。
<el-row v-for="(item, index) in extendArr" :key="index" style="padding-bottom:8px;">
属性{{index+1}}：
<el-input v-model="extendArr[index]" @change="handleChangeExtend(extendArr[index], index)" :disabled="!isUpdated"></el-input>
<el-button type="warning" icon="el-icon-delete" @click="handleDelExtend(index)" v-if="isUpdated"></el-button>
</el-row>
// js
data () {
return {
isUpdated: true,
extendArr: [],
}
},
methods: {
handleChangeExtend(val, valIndex) {
if(val == '') {
this.$message.warning('请填写扩展名称')
return
}
this.extendArr.forEach((item,index)=>{
if(item == val && index != valIndex) {
this.$message.warning('扩展名称不能相同')
this.extendArr[valIndex] = ''
}
})
},
handleDelExtend(index) {
this.extendArr.splice(index, 1);
},
handleAddExtend(){
this.extendArr.push("")
},
}