Antd-vue 使用tsx 穿梭表格框踩坑

问题

• 对tsx语法不太熟悉，antd官方给出的例子会报语法错误
• 在穿梭框的基础上，需要渲染一个表格
• 可以通过children 传入几个参数

render(){
  return(
        <a-transfer 
        :data-source="mockData" 
        :target-keys="targetKeys" 
        :disabled="disabled" 
        :show-search="showSearch" 
        :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1" 
        :show-select-all="false" @change="onChange" > 
        {{
          children: ({
            direction, //方向
            filteredItems, //过滤后的数据
            selectedKeys, //选中的条目
            disabled: listDisabled,  //是否禁用列表
            onItemSelectAll, //全选
            onItemSelect,//单选
          }) => {
              <a-table 
              :row-selection=" getRowSelection({ disabled: listDisabled, selectedKeys, onItemSelectAll,    onItemSelect, }) " 
              :columns="direction === 'left' ? leftColumns : rightColumns" 
              :data-source="filteredItems" 
              size="small" 
              :style="{ pointerEvents: listDisabled ? 'none' : null }" 
              :custom-row=" ({ key, disabled: itemDisabled }) => ({ onClick: () => { if (itemDisabled || listDisabled) return; onItemSelect(key, !selectedKeys.includes(key)); }, }) " /> 
          }
        }}
    </a-transfer>
  )
}

问题：全选无法反选

原因：少了一段比对的部分

//这里的selected 传的是全选true 或者 全不选 false
 onSelectAll(selected: boolean, selectedRows: Record<string, string | boolean>[]) { 
 
 const treeSelectedKeys = selectedRows .filter(item => !item.disabled) .map(({ key }) => key); 
 
 //少了这个比对的过程
 //如果是true的话 那么diffkeys的部分就是 要选的 和 选中的 差异的条目
 //如果是false  diffkeys 就是 选中的 和 要选的差异的条目
 //这里的difference只能对比数组中的基本类型，如果是对象是对比不出差异的 所以不能直接传选择条目的数组进去 只能传key进去过滤
 const diffKeys = selected 
 ? difference(treeSelectedKeys, selectedKeys)
 : difference(selectedKeys, treeSelectedKeys); 
 
 //然后再对这些项 全选或者全不选 根据动作来判断
 onItemSelectAll(diffKeys, selected); }, 
 
 onSelect({ key }: Record<string, string>, selected: boolean) { onItemSelect(key, selected); },

问题： 无法实现两边分开翻页 并且加上手动翻页之后，后面的内容没办法补位

解决：还没解决 可能不能直接用穿梭框了