实现效果
技术要点总结如下：
1、点击添加自动增加多行，实现自主选择增加多条节点数据
2、节点地址使用的是Cascader 级联选择器，需要动态生成，涉及到一个技术要点是：因v-modal只能获取value不能获取label，故需要解决在多个动态生成的Cascader 分别获取他们选中的label和value,
下面开始展示相关代码：html:<el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddPlatCarLineDetail">添加</el-button></el-col><el-col :span="1.5"><el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeletePlatCarLineDetail">删除</el-button></el-col></el-row><el-table :data="platCarLineDetailList" :row-class-name="rowPlatCarLineDetailIndex" @selection-change="handlePlatCarLineDetailSelectionChange" ref="platCarLineDetail"><el-table-column type="selection" width="50" align="center" /><el-table-column label="序号" align="center" prop="index" width="50"/><el-table-column label="节点名称" prop="nodeName" width="150"><template slot-scope="scope"><el-input v-model="scope.row.nodeName" placeholder="请输入节点名称" /></template></el-table-column><el-table-column label="节点地址" prop="nodeAddress" width="250" ><template slot-scope="scope"><el-cascaderv-model="valueNode[scope.$index]":options="optionsNodeSource":props="{value:'id',label:'name'}":ref="'cascader'+scope.$index"@change="handleChange(scope.$index)"></el-cascader></template></el-table-column> </el-table></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
js:handleChange(index){var that=thisvar name='cascader'+index
//this.valueNode[index] 对应的是省市区的id nameArr对应的是省市区的namevar nameArr=this.$refs[name].getCheckedNodes()[0].pathLabelsthat.$nextTick(function () {that.platCarLineDetailList[index].nodeAddress=nameArrconsole.log(that.platCarLineDetailList,that.valueNode)that.$forceUpdate()})
},
/** 车线详情添加按钮操作 */
handleAddPlatCarLineDetail() {var that=thisthat.$nextTick(function () {let obj = {};obj.nodeName = "";obj.nodeAddress = ""; that.valueNode.push([])//在data中定义格式为[[]]that.platCarLineDetailList.push(obj); that.$forceUpdate()})
},
/** 车线详情删除按钮操作 */
handleDeletePlatCarLineDetail() {if (this.checkedPlatCarLineDetail.length == 0) {this.$modal.msgError("请先选择要删除的车线详情数据");} else {const platCarLineDetailList = this.platCarLineDetailList;const valueNode = this.valueNode;const checkedPlatCarLineDetail = this.checkedPlatCarLineDetail;this.platCarLineDetailList = platCarLineDetailList.filter(function(item) {return checkedPlatCarLineDetail.indexOf(item.index) == -1});this.valueNode = valueNode.filter(function(item,indexV) {var num=indexV+1return checkedPlatCarLineDetail.indexOf(num) == -1});}
},代码解释
