vue3的elementplus 穿梭框镶嵌表格

在Vue3中使用ElementPlus的穿梭框（Transfer）镶嵌表格，可以通过自定义模板（template）来实现。

首先，需要安装ElementPlus：

npm i element-plus --save

然后，在需要使用穿梭框的组件中引入ElementPlus和样式文件：

import { ElTransfer } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

接着，需要在组件中定义一个数据列表（list）和一个已选数据列表（selectedList），并为ElementPlus的穿梭框设置相关参数：

<template>
  <el-transfer
    v-model="selectedList"
    :data="list"
    :titles="['可选数据', '已选数据']"
    :render-format="renderFormat"
  />
</template>

<script>
export default {
  data() {
    return {
      list: [...], // 数据列表
      selectedList: [...] // 已选数据列表
    };
  },
  methods: {
    renderFormat({ label, value }) { // 自定义模板
      return `
        <el-table :data="${value}" style="width: 100%">
          <el-table-column prop="name" label="${label}" />
        </el-table>
      `;
    }
  },
  components: {
    ElTransfer
  }
};
</script>

其中，`renderFormat`方法用于自定义穿梭框中每个选项的展示格式，这里使用了一个嵌套的表格来展示数据。

最终效果如下图所示：