vue的动态增减表单项
参考地址:https://www.iviewui.com/components/formiview的表单实例中,有一个是动态加减的表单实例<span><Form ref="TableInfo_form" :model="TableInfo_form" label-position="left" :
·
参考地址: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,或者索引。
更多推荐
已为社区贡献13条内容
所有评论(0)