【vue】两个el-select下拉框的值联动、回显互不影响

实现效果：

问题描述

这里项目中遇到的问题：
第二列无法回显数据，第二列的下拉数据列表是由第一列选择后的id根据接口获取，用同一个数组接，那么第二列数组中的数据都是相同的，是不可行的。

解决方案：

具体解决方案：
后端将相应的第二列列表数据回显，新增的时候，将新获取进行赋值



代码如下，有需要自行删减改动

<el-dialog :title="titleTags" :visible.sync="openTags" width="800px" append-to-body>
      <el-form ref="formTags" :model="formTags"  label-width="80px">
        <div>
          <el-table
            :data="formTags.questionTagList"
            style="width: 100%;"
            border
          >
            <el-table-column prop="optionCode" label="标签组" align="center" width="160">
              <template slot-scope="scope">
                  <el-select v-model="scope.row.tagsId" placeholder="请选择标签组" clearable @change="getTagInfoList($event,scope)">
                    <el-option
                      v-for="dict in getTagIdList"
                      :key="dict.id"
                      :label="dict.tagsName"
                      :value="dict.id"
                    />
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column label="标签" align="center"  >
              <template slot-scope="scope">
                <el-select v-model="scope.row.tagId" :disabled="scope.row.tagsId?false:true" placeholder="请选择标签" clearable>
                  <el-option
                    v-for="dict in scope.row.tagList"
                    :key="dict.id"
                    :label="dict.tagName"
                    :value="dict.id"
                  />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="text" style="color: red;" icon="el-icon-delete" @click="handleDeleteOptionTags(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="margin-top: 2%">
            <el-button @click="addLineTags()" style="margin-left: 40px">+ 添加</el-button>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitFormTags">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

import { getTagsDataList, getTagInfoList,questionTag, questionTagAdd, getQusetionTag } from "@/api/paper/questionTag";
export default {
  dicts: ['st_lx', 'xx_sfzq'],
  data() {
    return {
      getTagIdList: [],
      getTagId: [],
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 弹出层标题
      titleTags: "",
      // 是否显示弹出层
      openTags: false,
      // 表单参数
      form: {},
      formTags: {},
    };
  },
  methods: {
    /** 标签组列表 */
    async getTagsDataList(courseId) {
      await getTagsDataList({courseId:courseId}).then(response => {
        this.getTagIdList = response.data;
        this.getTagId = []
      });
    },
    /** 标签列表 */
    async getTagInfoList(tagsId,scope) {
      this.formTags.questionTagList[scope.$index].tagId = ''//选择标签组时清除选中标签
      await getTagInfoList({tagsId:tagsId}).then(response => {
        this.formTags.questionTagList[scope.$index].tagList = response.data//将获取的标签列表赋值给当前行的回显标签列表
      });
    },
    /** 打标签弹窗 */
    async handleUpOption(row){
      this.loading = true;
      this.formTags.questionId = row.id
      this.reset();
      this.titleTags = row.courseName+'-打标签'
      this.getTagsDataList(row.courseId)
      await getQusetionTag({questionId:row.id}).then(response => {//回显数据
        this.loading = false;
        if(response.data.length==0){//没有数据时初始化表格
          this.formTags = {
            questionId: this.formTags.questionId,
            questionTagList:[
              {
                id:undefined,
                questionId: row.id,
                tagId: undefined,
                tagsId: undefined,
                tagList: undefined,
              }
            ]
          }
        }else{
          this.formTags.questionTagList = response.data;
        }
        this.openTags = true;
      });
    },
    /** 打标签弹窗提交按钮 */
   submitFormTags(){
      this.$refs["formTags"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
           questionTagAdd(this.formTags.questionTagList).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.openTags = false;
            this.getList();
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },
    /** 打标签新增行*/
    addLineTags(){
      this.formTags.questionTagList.push({
        id:undefined,
        questionId: this.formTags.questionId,
        tagId: undefined,
        tagsId: undefined,
        tagList: undefined,

      })
    },
    /** 删除标签 */
   handleDeleteOptionTags(row){
      // 使用 findIndex 查找要删除行在 storageDataList 中的索引
      const rowIndex = this.formTags.questionTagList.findIndex(item => item === row)

      if (rowIndex !== -1) {
        if (this.formTags.questionTagList[rowIndex].id != null
          && this.formTags.questionTagList[rowIndex].id != ''
          && this.formTags.questionTagList[rowIndex].id != undefined) {
          this.$modal.confirm('是否确认删除？').then(() => {
            return questionTag(this.formTags.questionTagList[rowIndex].id)
          }).then(() => {
            this.formTags.questionTagList.splice(rowIndex, 1)
            this.$modal.msgSuccess('删除成功')
          })
        } else {
          this.formTags.questionTagList.splice(rowIndex, 1)
        }

      } else {
        this.$modal.msgWarning('未找到要删除的行')
      }
    },
    /** 查询试题列表 */
    getList() {},
    // 取消按钮
    cancel() {
      this.openTags = false;
      this.reset();
    },
    // 表单重置
    reset() {
      //重置打标签弹窗 初始化表格
      this.formTags = {
        questionId: this.formTags.questionId,
        questionTagList:[
          {
            id:undefined,
            questionId: this.formTags.questionId,
            tagId: undefined,
            tagsId: undefined,
            tagList: undefined,
          }
        ]
      }
      this.resetForm("formTags");
    },
  }
}