The table component of elementUI implements an inputtable table that can be dynamically added and deleted, and the data in the table needs to be linked.
Problem Description
The previous article solved how to implement an input table that can be dynamically added and deleted in the table. The link is as follows: The
table component of elementUI implements dynamic addition and deletion of input tables.
Now the data in the drop-down list in the table is loaded at once. There is no problem, but another problem arises,
that is, the data between the drop-down boxes are related to each other. For example, when the company is selected as "Test Company 001", the supplier drop-down list should be displayed as "Test Company 001" Corresponding supplier data; when selecting the company as "Test Company 002", the supplier drop-down list should display the supplier data corresponding to "Test Company 002"; that is to say, the supplier drop-down data is also dynamic, following The company's choices are changing. In this case, the previous method is not enough
to achieve the effect.
solution
The solution is to manually add a field (quanlifyCoopList) to the row-level data in the data of the table every time a row is added to store the data found by the data association of each row, so that each row has a separate Pull down the data. Every time you do data linkage, you only need to change the value of this newly added field in
the template part.
<el-form-item label="添加信息" prop="remark">
<!-- 添加按钮 -->
<el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
<el-table
:data="dataList"
size="mini"
>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column prop="companyName" label="公司名称" :show-overflow-tooltip="true" min-width="150">
<template slot-scope="scope">
<el-select
v-model="scope.row.companyName"
clearable
placeholder="请选择公司"
@change="handleCompany(scope.$index, scope.row)"
style="width: 100%"
>
<el-option
v-for="item in companyList"
:key="item.dicId"
:label="item.dicItemName"
:value="item.dicId"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="quanlifyCoop" label="供应商" :show-overflow-tooltip="true" min-width="150">
<template slot-scope="scope">
<el-select
v-model="scope.row.quanlifyCoop"
placeholder="请选择合同"
style="width: 100%"
>
<el-option
v-for="item in scope.row.quanlifyCoopList"
:key="item.dicId"
:label="item.dicItemName"
:value="item.dicId"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="contractName" label="合同名称" :show-overflow-tooltip="true" min-width="150">
<template slot-scope="scope">
<el-select
v-model="scope.row.contractName"
placeholder="请选择合同"
style="width: 100%"
>
<el-option
v-for="item in contractList"
:key="item.dicId"
:label="item.dicItemName"
:value="item.dicId"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="comment" label="备注" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-input v-model="scope.row.comment" clearable placeholder="请输入备注" />
</template>
</el-table-column>
<el-table-column width="50" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
script part
data() {
return {
dataList: [],
// 公司列表测试数据subList为关联的供应商下拉数据
companyList: [
{
dicId: '001',
dicItemName: '测试公司001',
subList: [
{
dicId: '001001',
dicItemName: '1号供应商1公司',
},
{
dicId: '001002',
dicItemName: '1号供应商2公司',
},
{
dicId: '001003',
dicItemName: '1号供应商3公司',
},
]
},
{
dicId: '002',
dicItemName: '测试公司002',
subList: [
{
dicId: '002001',
dicItemName: '2号供应商1公司',
},
{
dicId: '002002',
dicItemName: '2号供应商2公司',
}
]
},
{
dicId: '003',
dicItemName: '测试公司003',
},
],
contractList: [],
}
},
methods: {
// 添加行
handleAdd() {
var _this = this
let list = {
companyName: '',
quanlifyCoop: '',
contractName: '',
comment: '',
quanlifyCoopList: [] // 每行添加一个存放供应商下拉数据的字段
}
_this.dataList.push(list)
},
// 删除行
handleDelete(index, row) {
var _this = this
_this.dataList.splice(index, 1)
},
// 公司选中-改变供应商列表
handleCompany(index, row) {
var _this = this
// 每次公司改变时将供应商的值置空
row.quanlifyCoop = ''
let list = []
_this.companyList.forEach(line => {
if (row.companyName == line.dicId) {
list = line.subList
}
})
// 公司改变的时候对应每行的供应商下拉数据也要跟着改变
_this.dataList[index].quanlifyCoopList = list
// *如果关联数据是接口获取，需要在数据赋值完成后重新刷新以下table的data值
// *不然关联数据下拉列表由于vue框架数据驱动机制，只改变局部数据导致列表无法正常显示
_this.dataList = [..._this.dataList]
},
}
Data echo
The adding and deleting functions of the above solution have been perfectly implemented, but there is a new problem: Generally, this is implemented in the form, and the form involves editing. The data echoed during editing is It is obtained by calling the details interface, so the data associated with the drop-down list will not be displayed correctly.
Solution:
- While echoing the detailed data, we also need to manually add a field quanlifyCoopList to store related data.
- Then traverse the detailed data and assign the company's corresponding supplier list data to each quanlifyCoopList field.
- Assign the final detailed data to the data of the table
methods: {
// 获取详情-数据回显
getDetail(id) {
var _this = this
// 查详情接口
getDetail(id).then(res => {
res.data.companyList.length &&
res.data.companyList.forEach(line => {
_this.companyList.forEach(lineSub => {
if (line.companyName == lineSub.dicId) {
// 获取到回显列表后，给每个回显列表手动添加一个关联下拉列表值quanlifyCoopList
line.quanlifyCoopList = lineSub.subList
}
})
})
// 最后把带有quanlifyCoopList的数据统一赋值给table的data
_this.dataList = res.data.companyList
})
},
}
The above is based on personal experience, I hope it will be helpful to everyone!