Vue3用setup的形式，element-plus穿梭框进行的修改成table表格穿梭框

要使用Element Plus的Table表格穿梭框，你需要先安装Element Plus和Vue 3，然后可以使用下面的代码示例：

<template>
  <div>
    <el-transfer
      v-model="selectedData"
      :data="tableData"
      :filterable="true"
      :titles="['可选项', '已选项']"
      :format="format"
      :props="{
        key: 'id',
        label: 'name'
      }"
    >
      <template #left-footer>
        <el-pagination
          v-model="page"
          :page-size="pageSize"
          :total="total"
          :layout="'prev, pager, next'"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </template>
    </el-transfer>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from "vue";
import { ElPagination, ElTransfer } from "element-plus";

export default {
  name: "TableTransfer",
  components: {
    ElPagination,
    ElTransfer,
  },
  setup() {
    const state = reactive({
      tableData: [],
      selectedData: [],
      page: 1,
      pageSize: 10,
      total: 0,
    });

    const format = {
      noChecked: "未选中",
      hasChecked: "已选中",
      noMatch: "无匹配数据",
      isCheckAll: "已全选",
      searchPlaceholder: "请输入搜索内容",
    };

    const handlePageChange = (val) => {
      state.page = val;
      getTableData();
    };

    const getTableData = () => {
      // 这里可以根据实际情况请求数据，这里只是模拟数据
      const data = [];
      for (let i = 1; i <= 100; i++) {
        data.push({
          id: i,
          name: `选项${i}`,
        });
      }
      state.tableData = data.slice(
        (state.page - 1) * state.pageSize,
        state.page * state.pageSize
      );
      state.total = data.length;
    };

    watch(
      () => state.page,
      () => {
        getTableData();
      }
    );

    getTableData();

    return {
      ...toRefs(state),
      format,
      handlePageChange,
    };
  },
};
</script>

这个示例中，我们使用了`ElTransfer`组件，并将`data`属性设置为`tableData`，这是一个响应式的数组，用于显示可选项和已选项列表。`ElTransfer`组件的`props`属性指定了显示的数据项的`key`和`label`，此处用`id`和`name`。我们还使用了自定义的`format`属性，用于设置穿梭框的文本，如“已选中”、“未选中”等。

在模板中，我们使用了`ElPagination`组件来实现分页。我们将分页控件放在了穿梭框的左侧，使用了`left-footer`插槽来实现。

最后，在`setup`函数中，我们使用`reactive`函数创建一个响应式对象`state`，用来存储表格数据、已选数据、当前页码、每页显示数量和数据总数等信息。我们还定义了一个`handlePageChange`函数来处理分页变化事件，并使用`watch`函数来监听`page`属性的变化，并重新获取表格数据。最后，我们调用了`getTableData`函数来获取初始表格数据。