el-table,勾选行,切到其他页码又切回来,如何自动勾选之前选过的行




    ……
// 勾选行发生变化/切页时触发的监听方法
handleSelectionChange(selection) {
    // 在data中定义allSelectedRows和allSelectedRowsIds两个列表
    // allSelectedRows 保存勾选过的每一行的信息
    // allSelectedRowsIds 保存勾选过的每一行的id(用以切页后匹配id,重新勾选)
    this.allSelectedRows = [ ...this.allSelectedRows, ...selection ];
    // 去重
    this.allSelectedRows = Array.from(new Set(this.allSelectedRows.filter((item, index, arr) => arr.indexOf(item) === index)));
    this.allSelectedRowsIds = this.allSelectedRows.map((item)=>{return item.id});
}
// getList是查询tableData的方法
getList() {
    接口(请求参数).then((res) => {
            this.tableData = res.data;
        }
    ).then(() => {
            // 重新勾选之前勾选过的行的方法
            this.selectFormer();
        }
    )
}
// 重新勾选之前勾选过的行的方法
selectFormer() {
    // 获取el-table
    let table = this.$refs.table
    // 遍历el-table每一行
    table.store.states.data.forEach((row, index) => {
        // 如果之前保存的勾选行的id与当前遍历到的行的id匹配
        if (this.allSelectedRowsIds.indexOf(row.id) != -1) {
            // 那么把当前遍历到的行勾选上
            table.toggleRowSelection(this.tableData[index], true)
        }
    })
},

你可能感兴趣的:(vue.js,javascript,elementui)