a-transfer中使用a-table

<template>
  <a-drawer :title="businessDrawerTitle" :visible="businessVisible" class="dis-drawer-main" width="70%" @close="() => { $emit('close') }">
    <!-- 关闭按钮 -->
   <div class="closeBut" @click="() => $emit('close')"><a-icon type="close-circle" /></div>
    <a-transfer
      :data-source="mockData"
      :target-keys="targetKeys"
      show-search
      :filter-option="filterOption"
      @change="onChange"
    >
      <template
        slot="children"
        slot-scope="{
          props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
          on: { itemSelectAll, itemSelect },
        }"
      >
        <a-table
          :row-selection="
            getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
          "
          :columns="Columns"
          :data-source="filteredItems"
          size="small"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
          :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              on: {
                click: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })
          "
        />
      </template>
    </a-transfer>
    <div id="components-form-demo-advanced-search" class="page-root">
      <div
        class="dis-drawer-contain-save-module"
      >
        <a-button :style="{ marginRight: '8px' }" @click="() => $emit('close')">
          {{ $t('action.close') }}
        </a-button>
        <a-button type="primary" :loading="loading" @click="() => $emit('ok',mockData,targetKeys)">
          {{ $t('action.save') }}
        </a-button>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { getBusiSys } from '@/api/systemManage/systemRe'
import difference from 'lodash/difference';
export default {
    components: {
    },
    props: {
      businessVisible: {
        type: Boolean,
        default: () => false
      }
    },
    data () {
      return {
        mockData: [],
        targetKeys: [],
        loading: false
      }
    },
    computed: {
      businessDrawerTitle () {
          return this.$t('systemManage.systemRe.setBusinessSystem')
      },
      Columns () {
        return [
          {
            title: this.$t('systemManage.systemRe.sysCd'),
            dataIndex: 'sysCd'
          },
          {
            title: this.$t('systemManage.systemRe.sysName'),
            dataIndex: 'sysName'
          },
          {
            title: this.$t('systemManage.systemRe.liablePerson'),
            dataIndex: 'liablePerson'
          }
        ]
      }
    },
    mounted () {
    },
    created () { },
    watch: {
    },
    methods: {
      loadData (sysCd) {
        getBusiSys(sysCd).then(res => {
          if (res && res.code === 200) {
            // res.data = {
            //   "leftData": [
            //     {
            //       "sysCd": "0807test",
            //       "sysName": "0807test",
            //       "sysType": "2",
            //       "department": "test",
            //       "liablePerson": "wzh_t",
            //       "sysNote": "0807test",
            //       "upUser": "wzh_t",
            //       "upDate": "2024-08-07T03:05:04.000+00:00",
            //       "sysStat": "1",
            //       "startDt": "2000-01-01",
            //       "endDt": "2099-01-01",
            //       "tenantId": null,
            //       "submitTenantId": 21,
            //       "dbId": null
            //     },
            //   ],
            //   "rightData": [
            //     "919",
            //     "991"
            //   ]
            // }
            this.mockData = res.data.leftData//左侧数据
            this.mockData.forEach(item => {
              item.key = item.sysCd
            })
            this.targetKeys = res.data.rightData//右侧数据
          } else this.$message.error(res.msg)
        }).catch(err => {
          this.$message.error(err)
        })
      },
      onChange (nextTargetKeys) {
        this.targetKeys = nextTargetKeys
      },
      // 选中勾选处理
      getRowSelection ({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
        return {
          getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
          onSelectAll (selected, selectedRows) {
            const treeSelectedKeys = selectedRows
              .filter(item => !item.disabled)
              .map(({ key }) => key)
            const diffKeys = selected
              ? difference(treeSelectedKeys, selectedKeys)
              : difference(selectedKeys, treeSelectedKeys)
            itemSelectAll(diffKeys, selected)
          },
          onSelect ({ key }, selected) {
            itemSelect(key, selected)
          },
          selectedRowKeys: selectedKeys
        }
      },
      filterOption (inputValue, option) {
      return option.sysName.indexOf(inputValue) > -1
    }
    }
}
</script>
<style scoped lang="less">
.ant-transfer {
  height: calc(100vh - 108px);
  padding: 50px 30px !important;
}
</style>