一對多數據關聯關係狀態管理及實現方案

需求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的交集便可
此方案最優，且只需一個接口