vue3+antd实现表格穿梭框

在 Vue 3 中结合 Ant Design 实现表格穿梭框（Table Switcher），你可以利用 Ant Design 提供的 Table 组件和 Checkbox 组件来创建这个功能。以下是基本步骤：

1. 首先，在你的项目中安装 Ant Design 的依赖：

   npm install antd @vue/cli-plugin_ant design

2. 引入必要的组件和样式：

   import { Table, Input, Checkbox } from 'ant-design-vue';
   import 'ant-design-vue/dist/antd.css';

3. 创建数据结构，例如一个数组，表示需要处理的数据项，每个数据项包含一个 checkbox 属性用于标识是否选中：

   const data = [
     { key: '1', name: 'Item 1', selected: false },
     // ...其他数据项...
   ];

4. 定义表格组件，并设置列模板：

   <template>
     <div>
       <Table
         :data="data"
         row-key="key"
         border
         :columns={[
           {
             title: '操作',
             render: (text, record) => (
               <Checkbox v-model="record.selected" />
             ),
           },
           //...其他的列配置...
         ]}
       />
     </div>
   </template>

5. 在 script 中管理选中的状态，比如在表单提交、切换选择等事件中更新数据：

   <script setup>
   import { ref } from 'vue';

   const checkedData = ref([]);
   
   function handleSelectChange(row) {
     if (row.selected) {
       checkedData.value.push(row);
     } else {
       checkedData.value = checkedData.value.filter(item => item.key !== row.key);
     }
   }

   //...其他业务逻辑...

   </script>

6. 如果需要用户输入搜索条件，可以添加一个输入框配合 Table 的 filter prop 或者使用 Vue 自定义事件来过滤数据。

注意：以上代码示例是一个基础框架，实际应用可能还需要处理更多细节，如状态管理、错误处理、分页等。记得在适当的地方添加适当的事件监听器。