Ant Design Vue 表格穿梭框使用

html代码

<a-transfer
  :titles="['可选属性', '已选属性']"
  :dataSource="mockData"
  :target-keys="targetKeys"
  :show-search="true"
  :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
  :show-select-all="false"
  @change="onChange1"
  @search="handleSearch"
>
  <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="direction === 'left' ? leftColumns : rightColumns"
      :data-source="filteredItems"
      size="small"
      :pagination="false"
      :scroll="{y: 205}"
      :style="{ pointerEvents: listDisabled ? 'none' : null }"
      :custom-row="
        ({ key, disabled: itemDisabled }) => ({
          on: {
            click: () => {
              if (itemDisabled || listDisabled) return;
              itemSelect(key, !selectedKeys.includes(key));
            },
          },
        })
      "
    />
  </template>
</a-transfer>

js部分

<script>
const mockData = []
const originTargetKeys = []
const leftTableColumns = [
    {
        dataIndex: 'fieldCnName',
        title: '属性名称',
         align: 'center',
    },
]
const rightTableColumns = [
  {
   
    title: '序号',
    align: 'center',
    width: '30px',
     customRender: (text, record, index) => `${index + 1}`,
  },
    {
        dataIndex: 'fieldCnName',
        title: '属性名称',
         align: 'center',
    },
]
export default {
  data() {
    return {
      mockData,
      targetKeys: originTargetKeys,
      disabled: false,
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
      rootSubmenuKeys: [],
      openKeys: [],
    }
  },
  methods: {
    onOpenChange(openKeys) {
       console.log(openKeys, this.$route.path)
        const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1)
        console.log(latestOpenKey, this.rootSubmenuKeys.indexOf(latestOpenKey) === -1)
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.openKeys = openKeys
        } else {
            this.openKeys = latestOpenKey ? [latestOpenKey] : []
        }
    },
     onChange1(nextTargetKeys, direction, moveKeys) {
  
       console.log(nextTargetKeys, direction, moveKeys)
        this.targetKeys = nextTargetKeys
       
        let tableDir = this.tableDir
       
         if (this.tableDir != this.tableDirs) {
           this.rigdata=[]
            this.totalRolesList.forEach((item1) => {
              item1.modelList.forEach((item2) => {
                  if (tableDir == item2.entityCnName) {
                    this.umn  = item2.fieldCount 
                  }
              })
          })
         }
         if (direction == 'right') {
           this.rigdata.push(moveKeys.length)
            
            
             this.umn =  eval( this.rigdata.join("+")) 
            
             this.tableDirs = tableDir
         }else{
           console.log(9999999);
            console.log(this.umn);
           this.umn = this.umn - moveKeys.length
            //     this.tableDirs = tableDir
         }
         
           console.log(this.umn);
           
        // console.log(tableDir, length, this.totalRolesList)
        this.totalRolesList.forEach((item1) => {
            item1.modelList.forEach((item2) => {
                if (tableDir == item2.entityCnName) {
                  item2.fieldCount = this.umn   
                }
            })
        })
        
    
    },
    // 搜索框
    handleSearch(dir, value) {
        console.log('search:', dir, value)
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
       return {
            getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
            onSelectAll(selected, selectedRows) {
                if (selected == true) {
                    const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)

                    itemSelectAll(treeSelectedKeys, selected)
                } else if (selected == false) {
                    let treeSelectedKeys = this.selectedRowKeys

                    itemSelectAll(treeSelectedKeys, selected)
                }

                // console.log(decodeDeltasqqq);
            },
            onSelect({ key }, selected) {
                console.log(key, selected)
                itemSelect(key, selected)
            },

            selectedRowKeys: selectedKeys,
        }
    },
}
</script>