vue3table表格选中的数据回显以及禁止再次选中

需求：
添加数据的时候 是从table表中勾选数据，保存入库。添加按钮变为编辑，编辑时 table表格中回显添加的数据为默认选中的状态，后面发现再次编辑提交以后，发现会把之前添加的数据再入库一遍导致重复。我的思路是一旦添加入库的数据当点击编辑时再加上禁止选中，在提交的时候，过滤一下，只入库当次选中的数据。
前端：

点击添加弹出table页面，选中数据，点击确定入库：

主数据有两条子数据，并且添加变为修改

点击修改，在弹出的table表格中回显上次选中的数据，状态为选中状态，并且禁止对回显的数据进行操作。也就是勾选或者不勾选

鼠标移入选中的数据变为禁止。
具体实现：

const showDialog = (flg, val, selectedData) => {
        showFlag.value = flg
        testContentId.value = val
        // selectedData 为选中的数据，我这里选中的数据由父页面传递过来的
        将选中的数据的id取出来
        let check = selectedData.map(o => o.Id)
        nextTick(() => {
       // gridData为table表格的数据，这里是使用includes方法去筛选在table表格的数据里面那些是选中的
            for (let obj of gridData.value) {
                obj.disabled = true // 给每一行table中的数据设置一个disabled 为ture的标识
                if (check.includes(obj.Id)) {
                    obj.disabled = false //选中的这一行就设置为false ,因为false为禁止选中
                    proxy.$refs.multipleTableRef.toggleRowSelection(obj, true); // 这里是将选择过的数据做一个默认选中的效果
                }
            }
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

table表格：

   
        
            
            
            
            
                
            
            
        
        

            确定
            取消
        

    
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

说明：

   :selectable="row=>row.disabled" 这里就是根据这一行的disabled 来实现禁用 ，
    disable为true的时候可以选中，false的时候禁用，
    table中的每一行默认是没有disable属性的，所以是unfiend，
    既然是unfiend 那return的时候 是return的false,
    所以我需要在每一行都赋值为true，只有包含选中的那一行赋值为false。
    这样就实现了选中的那些行就是禁止操作的状态
    再搭配toggleRowSelection()方法就实现了 选中回显以及回显的数据为禁止状态
1
2
3
4
5
6
7

另外还有一种方式：给选中的数据添加disabled 为true，selectable中判断的时候取反

 const showDialog = (flg, val, selectedData) => {
        showFlag.value = flg
        testContentId.value = val
        let check = selectedData.map(o => o.toolId)
        console.log("selectData.value50505050", selectData.value)
        nextTick(() => {
            for (let obj of gridData.value) {
                if (check.includes(obj.toolId)) {
                    obj.disabled = true  //在这里给符合条件的数据将disabled设置为true
                    proxy.$refs.multipleTableRef.toggleRowSelection(obj, true);
                }
            }
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

table中：

 :selectable="row=>!row.disabled"
1

说明：

  这样的话，就是选中的那些数据 先设置disabled状态为true，
  selectable 返回值里面取反，也就是选中的那些就会为false，
  前面说到了 table里面默认是没有disabled属性的，这个时候会当成undefined去处理，
  那么在返回的时候就会返回false，false取反就为true了，
  这样就实现了没有选中的那些  就是ture的状态也就可以选中了。
1
2
3
4
5

官方文档中的解释：
table中，将一行设置 type=“selection”，绑定一个 :selectable方法，该方法默认传两个参数

toggleRowSelection方法可以实现选中的勾选状态

clearSelection方法可以实现清除选中的状态

在table中 添加 ref=“multipleTableRef”
取消方法：

   const cancel = () => {
        proxy.$refs.multipleTableRef.clearSelection()
        showFlag.value = false
    }
1
2
3
4

上述是个人理解。描述不恰当的地方欢迎指正。大家有问题可加vx,一起进步~