动态添加element标签，数据操作

我的问题每次点击添加新值按钮就会添加一个下拉框然后我对下拉框进行更改的时候第一次没问题但是如果我在选中的下拉框中从新选择数据就会发生变化会保留之前选中的值这样是不对通过索引每次进行更改时都会把之前选中的给替换掉
非常重要：this.attr.splice(index,1,{name , id})

    <el-dialog :title="visibleTitle" :visible.sync="dialogVisible" width="580px"><div><el-form:inline="true":model="formProperty"ref="formProperty"class="demo-form-inline"label-width="110px"label="left"><el-form-itemv-for="(domain, index) in formProperty.domains":label="'属性值：' + index":key="domain.key":prop="'domains.' + index + '.id'":rules="{required: true, message: '属性值不能为空', trigger: 'blur'}"><el-col :span="10"><el-selectv-model="domain.id"placeholder="请选择属性值"size="mini"@change="selectGetRole(domain.id,index)"><el-optionv-for="item in domain.options":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-col><el-col :span="10" style="margin-left:10px;"><el-input v-model="domain.id" size="mini"></el-input></el-col></el-form-item><el-form-item><el-button @click="addDomain" size="mini">添加新值</el-button></el-form-item></el-form></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="submitForm('formProperty')">确 定</el-button></span></el-dialog>

export default {data() {return {dialogVisible: false,visibleTitle: "",formProperty: {domains: [{id: "",name: "",options: [{id: "选项1",name: "黄金糕"},{id: "选项2",name: "双皮奶"},{id: "选项3",name: "蚵仔煎"},{id: "选项4",name: "龙须面"},{id: "选项5",name: "北京烤鸭"}]}]},attr: [],};},created() {},methods: {submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {console.log(this.formProperty.domains);alert("submit!");} else {console.log("error submit!!");return false;}});},addDomain() {this.formProperty.domains.push({id: "",name: "",options: [{id: "选项1",name: "黄金糕"},{id: "选项2",name: "双皮奶"},{id: "选项3",name: "蚵仔煎"},{id: "选项4",name: "龙须面"},{id: "选项5",name: "北京烤鸭"}],key: Date.now()});},selectGetRole(vId,index) {let domains = this.formProperty.domains[0].options;let obj = {};let name = ''let id = ''obj = domains.find(item => {name = item.nameid = item.idreturn item.id === vId;});//通过索引把更改之前的数据删除然后添加新的 来替代被删除的元素：this.attr.splice(index,1,{name , id})// console.log(this.attr); }}
};

第二个下拉框第一次选中了 ‘ 双皮奶 ’

然后对第二个下拉框进行了更改选中 ‘ 北京烤鸭 ’ 然后进行了替换~ 如果不替换每次都会push进去（会把之前的也保留下来）

动态添加element标签，数据操作相关推荐

动态创建数据表php,PHP实现动态添加XML中数据的方法
本文实例讲述了PHP实现动态添加XML中数据的方法.分享给大家供大家参考,具体如下: 前面简单讲述了xml文档的创建,这里继续讨论xml中数据的动态添加: 一. 代码 class Message_XM ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
js动态添加meta标签
有时候我们需要动态添加meta标签和里面的内容,如何添加呢? 举例: // 手动添加mate标签const addMeta = (name, content) => {const meta = ...
JS动态添加li标签
HTML代码 <div class="col-xs-12"><ul id="tabName" class="nav nav-tabs ...
JS从后台获取数据，前台动态添加tr标签中的td标签
功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...
使用TagFlowLayout制作动态添加删除标签
效果图简单的效果图(使用开源库)[FlowLayout]("https://github.com/hongyangAndroid/FlowLayout") 步骤导包 compi ...
Jquery动态添加img标签
 <div class="screenShot" style="display: none;"><div ...
Dwz点击左侧菜单动态添加Tab标签图标
此篇文章是基于ztree实现,若是dwz与ztree未整合,请先按照<DWZ和zTree整合(实现版)>文章整合. 需求描述: 点击左侧树形菜单(target=navTab)时,在左侧Ta ...
vue+element 使用el-tag实现单选多选，动态添加删除标签
以下是完整代码,仅供参考: <template><div class="tagDialog crmDialog"><el-dialogtitle=&q ...
html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的 ...

动态添加element标签，数据操作

动态添加element标签，数据操作相关推荐

最新文章

热门文章