vue3的elementplus 穿梭框实现镶嵌表格穿梭组件

可以使用Element Plus的Transfer组件结合Table组件来实现镶嵌表格穿梭组件。具体步骤如下：

1. 引入Transfer和Table组件

import { Transfer, TableColumn } from 'element-plus';

2. 定义需要穿梭的数据和列配置

// 穿梭框左侧表格数据
const tableData = [
  {
    id: 1,
    name: 'John Brown',
    age: 18,
    address: 'New York No.1 Lake Park'
  },
  {
    id: 2,
    name: 'Jim Green',
    age: 24,
    address: 'London No.1 Lake Park'
  },
  {
    id: 3,
    name: 'Joe Black',
    age: 30,
    address: 'Sydney No.1 Lake Park'
  },
  {
    id: 4,
    name: 'Jon Snow',
    age: 26,
    address: 'Winterfell No.1 Castle'
  }
];

// 穿梭框左侧表格列配置
const tableColumns = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  },
  {
    label: '地址',
    prop: 'address'
  }
];

3. 在模板中使用Transfer和Table组件

<el-transfer
  v-model="selectedData"
  :data="tableData"
  :titles="['可选数据', '已选数据']"
>
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <el-table-column label="地址" prop="address"></el-table-column>
</el-transfer>

4. 完整示例代码

<template>
  <div>
    <el-transfer
      v-model="selectedData"
      :data="tableData"
      :titles="['可选数据', '已选数据']"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-transfer>
  </div>
</template>

<script>
import { Transfer, TableColumn } from 'element-plus';

export default {
  components: {
    Transfer,
    TableColumn
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John Brown',
          age: 18,
          address: 'New York No.1 Lake Park'
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 24,
          address: 'London No.1 Lake Park'
        },
        {
          id: 3,
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No.1 Lake Park'
        },
        {
          id: 4,
          name: 'Jon Snow',
          age: 26,
          address: 'Winterfell No.1 Castle'
        }
      ],
      selectedData: []
    };
  }
};
</script>