关于javascript:一个类别和带分页的可多选表格的实现方案

左侧列表等于下拉框的值，一次只能选一个
右侧带分页数据即该下拉框上面的可选项

需要A:须要做一个一对多的关联关系状态治理界面

左侧是一个列表右侧是一个带分页可勾选列表
实现计划：前端保护所有关联数据，提交时提交该选项下的所有选中数据

1. 进入页面后先获取右侧列表数据tableData2
2. 左侧点击时获取与这条记录相干的右侧列表的所有页的ids组成的数组,
   拼成id 字符串后复制两份别离保留在selectedIds1(服务端返回ids)及selectedIds2(用于用户交互)
3. 遍历tableData2获取selectedIds2在tableData2里的index值
4. 依据tableData2及index值回填右侧列表

用户操作会批改selectedIds2的值,前端需同时解决跨页数据，
点击下一页获取该页数据后，依据selectedIds2回填数据（须要在nextTick里回填，同一个macrotask里回填不胜利）

// 用户点击操作
selectHander (selection, row) {
    // 如果已选变未选则移除，
    // 如果未选变已选则退出
    let tmp2 
    let id = row.id
    if (this.selectedIds2.length > 0) {
        let tmp = this.selectedIds2.split(',')
        tmp2= new Set(tmp)
    }
    if (tmp2.has(id)) {
        tmp2.delete(id)
    } else {
        tmp2.add(id)
    }
    this.selectedIds2 = [...tmp2].join(',')
    // console.log('rowrowrowrow', this.selectedIds2)
},
// 依据ids设置表格数据回填
setRowSelectedByIds (ids) {
    let idsStr = ids
    let tb2 = this.tableData2
    let rowsIndexs = this.getRowsIndexByIds(idsStr)
    let rows = rowsIndexs.map(index => {
        return tb2[index]
    })
    // console.log('rowsIndexs', rowsIndexs, rows, tb2)
    // 先清空所有选中 再设置该选项
    this.$refs.Table2.clearSelection()
    this.toggleRowSelectionHander(rows)
},
// 依据idstr获取table2的index值
getRowsIndexByIds (idstr) {
    let idArr = idstr.split(',')
    let datas = this.tableData2
    let arrReturn = []
    idArr.forEach(id => {
        let t = datas.findIndex(data => {
            return data.id === id
        })
        // 如果选中的数据 不在当前页则t为undefined
        if (t !== -1) {
            arrReturn.push(t)
        }
    })
    // console.log('适合数组index', arrReturn)
    return arrReturn
},

需要A1:因为多的一方可能会配置很多须要增加批量抉择性能

即 须要增加右侧列表的全选性能

selectAllHander(selection){
  // 这里selection是该页的所有选中数据
  // 选中id数组连贯已选id数组即selectedIds2转换后的数组
  // 通过set去重后再转换为数组在变为id字符串即可
  let ids2 = this.selectedIds2;
  let arr = selection.map(ele=>ele.id).concat(ids2.split(","))
  this.selectedIds2 = [...new Set(arr)].join(",")
}

需要A2:多的一方增加查问条件

这个不影响只须要在查问的时候增加相应的查问条件即可

总结

计划一曾经实现，但计划不是很好
毛病：

1. 每一个数据的扭转都须要与已选项进行比照并解决（判断移除该项还是增加该项）
2. 如果已选项比拟多时服务端返回的将会是一个很大的数组而大部分数据是无用的
3. 已选项比拟多时id组成的字符串会比拟大

长处：

1. 用户只需点击一次保留，所有页数据的操作都会失去保留

计划二：
点击左侧返回所有右侧已选数据用于翻页后数据回填
保留时只解决当页数据的关联关系
毛病：

1. 每一页用户都须要点击保留按钮否则数据会造成数据失落
2. 如果已选项比拟多时服务端返回的将会是一个很大的数组而大部分数据是无用的

长处：

1. 保留时不须要给全副数据，只须要给当页数据不会造成页面因勾选项过多造成页面过于卡顿

计划三：
点击左侧仅返回右侧当前页已选数据。
高低页及跳页时需依据查问条件及左侧已选获取该页数据及该页回填数据。
点击左侧时需同时把右侧所有查问条件一并传过来，用于服务端解决。
服务端只须要依据查问条件获取右侧要显示的当页数据，
及依据左侧已选项获取右侧已选项id与右侧要显示页数据列表id的交加即可
此计划最优，且只需一个接口