vue的动态增减表单项

参考地址：https://www.iviewui.com/components/form

iview的表单实例中，有一个是动态加减的表单实例

    <span>
        <Form ref="TableInfo_form" :model="TableInfo_form" label-position="left" :rules="ruleValidate"  :label-width="200">
          <card v-for="(colForm,index) in colFormList" :key="index" class="colform">
         <FormItem label="列名 (必填)" prop="name">
            <Input v-model="colForm.name"></Input>
        </FormItem>
        <FormItem label="列类型 (必填)" prop="type">
            <Input v-model="colForm.type"></Input>
        </FormItem>
        <FormItem label="精度" prop="scale">
            <Input v-model="colForm.scale"></Input>
        </FormItem>
          <FormItem label="是否可为空 (必填)">
            <RadioGroup v-model="colForm.notnull">
                <Radio label="1">非空</Radio>
                <Radio label="0">可空</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="默认值">
        <Select v-model="colForm.defaultValue">
        <Option value="int" label="int">
        </Option>
          <Option value="varchar" label="varchar">
        </Option>
          <Option value="date" label="date">
        </Option>
          <Option value="datetime" label="datetime">
        </Option>
        </Select>
        </FormItem>
        <FormItem label="列注释" prop="remark">
            <Input v-model="colForm.remark"></Input>
        </FormItem>
             <div  class="s_icon_div"><Icon type="ios-remove-circle" size="30" @click="removeform(index)"/></div>
            </card>
           <div  class="s_icon_div"><Icon type="ios-add-circle" size="30" @click="addform"/></div>
    </Form>
    </span> 
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      colFormList: [{
        index: 0,
        name: '',
        type: '',
        precision: '',
        scale: '',
        notnull: '1',
        defaultValue: 'int',
        remark: ''
      }],
      ruleValidate: {
      }
    }
  },
  methods: {
    removeform (i) {
      console.log(i)
    },
    addform () {
      this.index++
      this.colFormList.push(
        {
          index: this.index,
          name: '',
          type: '',
          precision: '',
          scale: '',
          notnull: '1',
          defaultValue: 'int',
          remark: ''
        }
      )
    },
  },
  created () {
    this.initVform()
  }
}
</script>

这个代码我删减了，上面是主要代码。

主要注意就是在 vue 里，:key 的作用是方便 vue 辨识 DOM，这样，如果在重新渲染时遇到和之前完全相等的 key，就可以不用渲染，节省时间。所以写的时候就要用简单可识别的值，比如 id，或者索引。