elementUI的table组件实现动态增删数据联动的可输入的表格

elementUI的table组件实现动态增加、删除的可输入的表格，并且表格中的数据要做联动

问题描述

上篇文章解决了如何在table中实现可以动态增加和删除的可输入的表格，链接如下：
elementUI的table组件实现动态增删可输入的表格
现在表格里面的下拉列表的数据是一次性加载出来的情况是没问题了，但是又出现了另外一个问题，
就是下拉框之间的数据是相互关联的，比如选择公司为“测试公司001”的时候，供应商下拉列表要显示为与“测试公司001”对应的供应商数据；选择公司为“测试公司002”的时候，供应商下拉列表要显示为与“测试公司002”对应的供应商数据；也就是说供应商的下拉数据也是动态的，跟随着公司的选择在变化，这种情况下之前的方法就不满足了
实现效果

解决方案

解决方案是每次添加行的时候，在table的data的数据中的行级数据中手动添加一个字段（quanlifyCoopList），用来存放每一行数据关联查出来的数据，这样每行都拥有了单独的下拉数据，每次做数据联动的时候只需要改变这个新添加的字段的值即可
template部分

<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部分

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]
  },
}

数据回显

以上方案新增和删除功能已完美实现，但是又有一个新的问题：一般这种是要刚在form表单中来实现的，表单就涉及到编辑的问题，编辑的时候数据回显的数据是通过调用详情接口拿到的，所以关联下拉列表的数据就不会正确的显示，
解决办法：

1. 回显拿到详情数据的同时，还时需要我么手动添加一个存放关联数据的字段quanlifyCoopList
2. 再遍历详情数据，给每个quanlifyCoopList字段赋值公司对应的供应商列表数据
3. 把最终得到的详情数据赋值给table的data

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
    })
  },
}

以上时个人经验，希望对大家有所帮助！