vue动态添加输入框

小知识 08-31 11:42

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("")
    },
}