实现效果
技术要点总结如下:
1、点击添加自动增加多行,实现自主选择增加多条节点数据
2、节点地址使用的是Cascader 级联选择器,需要动态生成,涉及到一个技术要点是:因v-modal只能获取value不能获取label,故需要解决在多个动态生成的Cascader 分别获取他们选中的label和value,
javascript
下面开始展示相关代码:
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-cascader
v-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=this
var name='cascader'+index
//this.valueNode[index] 对应的是省市区的id nameArr对应的是省市区的name
var nameArr=this.$refs[name].getCheckedNodes()[0].pathLabels
that.$nextTick(function () {
that.platCarLineDetailList[index].nodeAddress=nameArr
console.log(that.platCarLineDetailList,that.valueNode)
that.$forceUpdate()
})
},
/** 车线详情添加按钮操作 */
handleAddPlatCarLineDetail() {
var that=this
that.$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+1
return checkedPlatCarLineDetail.indexOf(num) == -1
});
}
},
代码解释