vue element-table分页回显选中与再次更改保留状态，前端手动过滤多条件查询

需求：
1.table表格多选，并且切换分页后记住上一页选项
2.回显数据，切换分页后依然回显
3.全选，取消全选数据正常变化
4.后台分页
5.前端手动过滤，多条件查询
代码：

  props: {
  //回显的数据，我这里是上一页传过来的数据
    questionListChoose: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
data() {
    return {
    	roleList:[],//总数据
    	echoList: [], //选中的id
        echoListObj: [], //选中的对象
        echoListAllObj: [], //选中的对象--备份全部
        filter: {},//筛选条件
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  mounted() {
    this.getList();
    this.echoList = JSON.parse(
      JSON.stringify(
        this.questionListChoose.map((i) => {
          return i.question_id;
        })
      )
    );
    this.echoListObj = JSON.parse(JSON.stringify(this.questionListChoose));//数据对象
    this.echoListAllObj = JSON.parse(JSON.stringify(this.questionListChoose));//备份
    console.log("echoList==", this.echoList);
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

 
          
 
1
2
3
4
5
6
7
8
9
10

  /** 查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.question_bank_id = this.question_bank_id;
      questionList(this.queryParams).then((response) => {
        this.roleList = response.data;
        this.total = response.total;
        //在当前分页列表中查询与回显数据是否有一致的，一致的则回显勾选
        this.$nextTick(() => {
          this.roleList.forEach((item) => {
            if (this.echoList.includes(item.question_id)) {
              this.$refs.allTable.toggleRowSelection(item, true);
            }
          });
        });
        this.loading = false;
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    // 单选
    select2(selecteds, row) {
      if (!this.echoList.includes(row.question_id)) {
        // 回显数据⾥没有本条，把这条加进来(选中)
        this.echoList.push(row.question_id);
        this.echoListObj.push(row);
        this.echoListAllObj.push(row);
      } else {
        // 回显数据⾥有本条，把这条删除(取消选中)
        this.echoList.forEach((question_id, index) => {
          if (question_id === row.question_id) {
            this.echoList.splice(index, 1);
            this.echoListObj.splice(index, 1);
            this.echoListAllObj.splice(index, 1);
          }
        });
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//全选，取消全选
    selectAll2(selecteds) {
      if (selecteds.length > 0) {
        //全选
        selecteds.forEach((item) => {
          if (!this.echoList.includes(item.question_id)) {
            this.echoList.push(item.question_id);
            this.echoListObj.push(item);
            this.echoListAllObj.push(item);
          }
        });
      } else {
        this.roleList.forEach((item) => {
          this.echoList.forEach((question_id, index) => {
            if (question_id === item.question_id) {
              this.echoList.splice(index, 1);
              this.echoListObj.splice(index, 1);
              this.echoListAllObj.splice(index, 1);
            }
          });
        });
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

前端手动过滤，多条件查询

//前端搜索
handleQuery() {
 // 搜索已选试题
        var objIsEmpty =
          this.filter.topic_dry == '' &&
          this.filter.difficulty == "" &&
          this.filter.topic == '' &&
          this.filter.dictionary_name =='';
        if (objIsEmpty) {
         // 都为空不做处理
        } else {
          let tempFilter = {};
          for (var key in this.filter) {
            if (
              typeof this.filter[key] != "undefined" &&
              typeof this.filter[key] != "null" &&
              this.filter[key] != null &&
              this.filter[key] != ""
            ) {
              tempFilter[key] = this.filter[key];
            }
          }
          console.log(tempFilter, "输出tempFilter");
          this.$nextTick(() => {
            this.echoListObj = this.echoListAllObj.filter((item) => {
              let flag = false;
              for (key in tempFilter) {
                if (
                  item[key].toString().indexOf(tempFilter[key].toString()) >= 0
                ) {
                  flag = true;
                } else {
                  flag = false;
                  break;
                }
              }
              if (flag) {
                return item;
              }
            });
            // 搜索结果回显选中
            this.$nextTick(() => {
              this.echoListObj.forEach((i) => {
                this.$refs.multipleTable.toggleRowSelection(i, true);
              });
            });
          });
        }
        console.log(this.echoListObj, "输出筛选结果");

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51