vue element-ui动态表单

代码 

<template>
  <div>
  <el-button @click="add" v-if="meslist.length<=0">添加</el-button>
  <div v-if="meslist.length>0">
  <div v-for="(items,ind) in meslist" :key="ind">
      <el-select v-model="valuelist[ind]" placeholder="请选择" @change="change(ind)">
      <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item"
        :value="item">
      </el-option>
    </el-select>

    <span v-for="(i,index) in keylist[ind]" :key="i">{{i}}
    <el-button @click="delone(ind,index)">X</el-button>
    
    </span>
    <el-button @click="del(ind)">删除</el-button>
    </div>
     <el-button @click="add">添加</el-button>
  </div>
 <el-button @click="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      meslist:[],
      valuelist:[],
      options:['甜味','温度','忌口'],
      dishflavors:[{"name":"甜味","values":["少糖","半塘","多糖"]},
      {"name":"温度","values":["加冰","少冰","常温"]},{"name":"忌口","values":["微辣","麻辣","中辣"]}],
      keylist:[],
      list1:[]
    }
  },
  methods: {
    add(){
      this.meslist.push({"name":'','value':''})
    },
    del(ind){
      this.valuelist.splice(ind,1)
      this.keylist.splice(ind,1)
      this.meslist.splice(ind,1)
    },
    change(index){
      var k = this.valuelist[index]
      this.dishflavors.forEach(element => {
        if(element.name == k){
          this.list1=[]
          for(var i=0;i< element.values.length;i++){
            this.list1.push(element.values[i])
          }
          this.keylist[index]=this.list1
        }
      });

    },
    delone(ind,index){
      this.keylist[ind].splice(index,1)
    },
    submit(){
      var list = []
      for(var i=0;i<this.valuelist.length;i++){
        list.push({"name":this.valuelist[i],"value":JSON.stringify(this.keylist[i])})
      }
      console.log(list)
    }
  },
}
</script>

<style>

</style>

效果