标签:rip apply mes src methods 技术 fse index mit
前端模版
要点说明(仅是自己在调试中总结的个人理解,非官方,认知有限)
<Form ref="applyInfo" :model="applyInfo" :rules="rules"> <Card> <p slot="title"> <Icon type="ios-chatboxes"></Icon> 生产者白名单新增 </p> <div id="produce"> <FormItem> <Row> <Col span="12"> <Button type="primary" @click="addProduceData">添加</Button> </Col> </Row> </FormItem> <Row v-for="(item, index) in applyInfo.produceData.items" v-if="item.status" :key="index"> <Col span="6" > <FormItem label="topic" :prop="‘produceData.items.‘+index+‘.value.topic‘" :label-width=110 :rules="[{required:true,message:‘topic不能为空‘,trigger:‘blur‘}]"> <Input v-model="item.value.topic" placeholder="输入topic名称"/> </FormItem> </Col> <Col span="6" offset=1> <FormItem label="白名单bns" :prop="‘produceData.items.‘+index+‘.value.bns‘" :label-width=110 :rules="[{required:true,message:‘topic不能为空‘,trigger:‘blur‘}]"> <Input v-model="item.value.bns" placeholder="输入生产者bns白名单"/> </FormItem> </Col> <Col span="6" offset="1"> <Button type="error" @click="deleteRow(index)">删除</Button> </Col> </Row> </div> </Card> </form>
js部分
<script> export default { data() { return { index:1, applyInfo: { produceData:{ items:[ { } ] }, },
}, methods: { addProduceData(){ this.index++; this.applyInfo.produceData.items.push({ value:{ topic:‘‘, bns:‘‘ }, index: this.index, status:1 })
}, }
效果
标签:rip apply mes src methods 技术 fse index mit
原文地址:https://www.cnblogs.com/Bccd/p/13125831.html