时间: 2020-11-24|50次围观|0 条评论

              
// 这里是页面上展示的数据
<div v-for="(item, index) in knowledgeItems" :key="true"> <Row style="margin-top:20px;"> <Col span="4" style="font-size:18px;padding-left:32px;">标题{ {index + 1}}:</Col> <Col span="16"><i-input placeholder="请输入..." v-model="item.title"></i-input></Col> <Col span="4" style="padding-left:20px;"> <Button type="primary" @click.native="deleteKnowledge(index)">删除</Button></Col> <Col span="4" style="font-size:18px;margin-top:20px;padding-left:32px;">标题{ {index + 1}}内容:</Col> <Col span="16" style="margin-top:20px;"> <quillEditor v-model="item.content"></quillEditor> </Col> </Row> </div>

<Row style="margin-top:20px;">
  <Col span="4">&nbsp;</Col>
  <Col span="16"><i-button style="width:100%" @click.native="addknowledgeItem()">+ 增加更多标题内容(点击此处)</i-button></Col>
</Row>


deleteKnowledge (index) {
  this.$Modal.confirm({
    title: '友情提示',
    content: '你确定要删除此条吗?',
    onOk: () => {
      this.knowledgeItems.splice(index, 1)
      this.knowledgeItems2 = this.knowledgeItems
    }
  })
}

addknowledgeItem () {
  let knowledge = {}
  knowledge.title = ''
  knowledge.content = ''
  this.knowledgeItems.push(knowledge)
  this.knowledgeItems2 = this.knowledgeItems
}

Vue 动态添加 删除选项插图

 

转载于:https://www.cnblogs.com/utomboy/p/7889582.html

原文链接:https://blog.csdn.net/weixin_30342827/article/details/96110407

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《Vue 动态添加 删除选项
   

还没有人抢沙发呢~