求教：vue中的find()函数的用法&this.$set

超爱吃香菜的菜鸟2025-04-10 9:48

需求：为了实现联动，当我在选择问题标题之后，后面几列的内容就会自动联动显示

方案一：选完之后直接是this.questionList $index$ = this.selected;

这样的效果虽然改动了数组，但是页面上没有显示出来实际数组的内容

于是改成了 this.$set(this.questionList,index,this.selected);

于是出现了第二种bug:

第一次选择还是正常的，第二次选择下拉框里面的内容第一次选择项的id就会被替换掉

整个下拉框的options 内容变动了。就发生了如此神奇的事情。

复制代码

<el-table
          v-loading="loading"
          :data="questionList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="问题标题"
            align="center"
            prop="title"
            width="250px"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.id"
                placeholder=""
                clearable
                size="small"
                style="width: 200px"
                filterable  
                @change="selectQuestionChange(scope.$index, scope.row)"
              >
                <el-option
                  v-for="dict in questionOptions"
                  :key="`unique-${dict.id}-${dict.title}`"
                  :label="`${dict.id}-${dict.title}`"
                  :value="dict.id"
                />
              </el-select>
            </template>
          </el-table-column>

........................

下拉框里面的selectQuestionChange方法如下：

复制代码

selectQuestionChange(index, val) { 
      let selected = null;
      let options =[...this.questionOptions];
      if (val.id > "") {
        selected =options.findIndex((item) =>{ return item.id === val.id });
        
        this.selected = this.questionOptions[selected];
           this.$set(this.questionList,index,selected);
      } else {
        selected = {
          id: null,
          title: null,
          basis: null,
          isPitfall: null,
          isImportant: null,
          correction: null,
          createdTime: null,
          isDeleted: null,
        };
         this.$set(this.questionList,index,selected);
      }

于是最终的解决方案就是表格数组里的对象的值，都一个个进行对应的赋值

复制代码

        this.questionList[index].isPitfall = this.selected.isPitfall;
        this.questionList[index].isImportant = this.selected.isImportant;
        this.questionList[index].basis = this.selected.basis;
        this.questionList[index].correction = this.selected.correction;