新增行下两个下拉框之间的动态关联

<el-table-column
                            type="index"
                            width="250"
                            label="期间"
                            prop="reversalPeriodCode"
                            align="center"
                          >
                            <template slot-scope="scope">
                              <el-select v-model="scope.row.reversalPeriodCode" @change="changeNextDateCode(scope.row)" placeholder="请选择"  :disabled="tableFlag">
                                <el-option
                                  v-for="item in cxqjOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column
                            type="index"
                            width="250"
                            label="日期"
                            prop="reversalDateCode"
                            align="center"
                          >
                            <template slot-scope="scope">
                              <el-select v-model="scope.row.reversalDateCode" placeholder="请选择"  :disabled="reversalDateFlag" >
                                <el-option
                                  v-for="item in scope.row.cxrqOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                            </template>
                          </el-table-column>

期间的cxqjOptions正常定义就好，日期下拉框遍历的是scope.row.cxrqOptions，因为新增多行的时候，存在每一行两个下拉框选项的对应关系，所以日期下拉框选项定义为每一行的cxrqOptions。

新增按钮点击执行方法中，将对象中加入cxrqOptions:'',一个新属性，用于存储下拉选项 

//新增行
          addRow() {
            if (this.taskForm.lpsZzAutorevCriteriaOptionsList == undefined) {
              this.taskForm.lpsZzAutorevCriteriaOptionsList = new Array();
            }
            let b = {
              autopostReversalFlag:'',
              postingPriority:'',
              jeSourceName:'',
              jeCategoryName:'',
              reversalPeriodCode:'',
              reversalDateCode:'',
              methodCode:'',
              cxrqOptions:'',
            }
            this.taskForm.lpsZzAutorevCriteriaOptionsList.push(b)
            this.$nextTick(()=>{
              this.bomKey++;
            })
          },

日期改变触发@change="changeNextDateCode(scope.row)"方法，根据每行日期下拉框选择的值，将期间对应的下拉选项存入每行cxrqOptions中。

//两下拉框之间的关系
changeNextDateCode(){
            this.reversalDateFlag = false
            this.taskForm.lpsZzAutorevCriteriaOptionsList.forEach((itemA, indexA)=>{
              if(this.taskForm.lpsZzAutorevCriteriaOptionsList[indexA].reversalPeriodCode
              === '3') {
                this.taskForm.lpsZzAutorevCriteriaOptionsList[indexA].cxrqOptions = this.cxrqOptions3
              }
              if(this.taskForm.lpsZzAutorevCriteriaOptionsList[indexA].reversalPeriodCode
                === '2' || this.taskForm.lpsZzAutorevCriteriaOptionsList[indexA].reversalPeriodCode
                === '1') {
                this.taskForm.lpsZzAutorevCriteriaOptionsList[indexA].cxrqOptions = this.cxrqOptions12
              }
              if(this.taskForm.lpsZzAutorevCriteriaOptionsList[indexA].reversalPeriodCode
                === '4') {
                this.reversalDateFlag = true
              }
            })
          },

以上就可以实现对应关系。

注：如果期间存储属于字典项形式，显示中文，存储英文。那么将会存在一个问题，当你查看的时候，页面中期间列会显示英文，不会自动转换，因为我们之前定义的期间下拉选项是存储于每一行的字段cxrqOptions中，保存的时候并不会保存这个字段。查询出来就不会有可参考的label-value对应关系,自然不会显示中文。

那么解决办法就是在数据从后端传进来的时候，给数据加上cxrqOptions字段，判断查询的每行数据日期值，根据对应关系，给期间下拉框cxrqOptions赋值可选项。

//查看
          lookRow(row) {
            this.taskForm = {}
            getObj(row.criteriaSetId).then(res=>{
              this.newDataOptions(res.data) //二次加工返回数据
            }).catch(() => {
              loading();
            });
            this.flag = 0
            this.flag1 = 0
            this.editFlag1 = true
            this.editFlag2 = true
            this.reversalDateFlag = true
            this.tableFlag = true
            this.btnFlag = false
            this.visible = true

          },

newDataOptions(taskForm){
            const newList = taskForm;
            for (let i = 0; i < newList.lpsZzAutorevCriteriaOptionsList.length; i++) {
              if(newList.lpsZzAutorevCriteriaOptionsList[i].reversalPeriodCode === '3') {
                //加上新字段cxrqOptions ，赋值定义好的可选项this.cxrqOptions3
                newList.lpsZzAutorevCriteriaOptionsList[i].cxrqOptions = this.cxrqOptions3;
              }
              if(newList.lpsZzAutorevCriteriaOptionsList[i].reversalPeriodCode === '1'
              || newList.lpsZzAutorevCriteriaOptionsList[i].reversalPeriodCode === '2') {
                newList.lpsZzAutorevCriteriaOptionsList[i].cxrqOptions = this.cxrqOptions12;
              }
              if(newList.lpsZzAutorevCriteriaOptionsList[i].reversalPeriodCode === ''
                || newList.lpsZzAutorevCriteriaOptionsList[i].reversalPeriodCode === null) {
                newList.lpsZzAutorevCriteriaOptionsList[i].cxrqOptions = '';
              }
            }
            this.taskForm = newList
          },