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

以下是一个基于Element Plus和TypeScript的镶嵌表格穿梭组件的实现：

<template>
  <div class="nested-transfer">
    <el-transfer
      v-model="value"
      :data="leftData"
      :titles="[leftTitle, rightTitle]"
      :filterable="filterable"
      :props="{
        key: leftKey,
        label: leftLabel,
        disabled: leftDisabled
      }"
      :render-content="renderContent"
      @change="handleChange"
    >
      <template #left-footer>
        <el-input
          v-model="leftSearch"
          size="small"
          placeholder="请输入搜索内容"
          suffix-icon="el-icon-search"
        />
      </template>
      <template #default="{ option }">
        <div class="transfer-option">
          <div class="option-label">{{ option.label }}</div>
          <el-table
            :data="option.children"
            :key="option.key"
            :row-key="rightKey"
            :columns="rightColumns"
            :row-class-name="rightRowClassName"
            :header-cell-style="rightHeaderCellStyle"
            :cell-style="rightCellStyle"
          />
        </div>
      </template>
    </el-transfer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElTransfer, ElInput, ElTable, TableColumn } from 'element-plus';

interface Option {
  key: string | number;
  label: string;
  children: any[];
}

export default defineComponent({
  name: 'NestedTransfer',
  components: {
    ElTransfer,
    ElInput,
    ElTable,
    TableColumn,
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    leftData: {
      type: Array,
      default: () => [],
    },
    leftTitle: {
      type: String,
      default: '源列表',
    },
    leftKey: {
      type: String,
      default: 'key',
    },
    leftLabel: {
      type: String,
      default: 'label',
    },
    leftDisabled: {
      type: String,
      default: 'disabled',
    },
    filterable: {
      type: Boolean,
      default: true,
    },
    rightTitle: {
      type: String,
      default: '目标列表',
    },
    rightKey: {
      type: String,
      default: 'key',
    },
    rightColumns: {
      type: Array,
      default: () => [],
    },
    rightRowClassName: {
      type: Function,
      default: () => '',
    },
    rightHeaderCellStyle: {
      type: Function,
      default: () => '',
    },
    rightCellStyle: {
      type: Function,
      default: () => '',
    },
  },
  data() {
    return {
      leftSearch: '',
    };
  },
  computed: {
    leftOptions(): Option[] {
      return this.leftData.map((item: any) => ({
        key: item[this.leftKey],
        label: item[this.leftLabel],
        children: item.children,
      }));
    },
  },
  methods: {
    renderContent(h: any, option: Option) {
      return h('span', [option.label]);
    },
    handleChange() {
      this.$emit('input', this.value);
    },
  },
});
</script>

<style scoped>
.nested-transfer .transfer-option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.nested-transfer .option-label {
  width: 120px;
  margin-right: 10px;
  font-weight: bold;
}
</style>

在上面的组件中，我们使用了 Element Plus 的 `ElTransfer` 组件来实现穿梭框，同时使用了 `ElTable` 组件来实现镶嵌表格。我们通过 `leftData` 属性传递左侧表格的数据源，通过 `leftKey`、`leftLabel` 和 `leftDisabled` 属性指定左侧表格的数据源中哪些字段分别对应数据项的键、标签和禁用状态。右侧表格的列信息则通过 `rightColumns` 属性传递。我们还为左侧表格添加了一个搜索框，用户可以在该搜索框中输入搜索内容来过滤左侧表格的数据项。最后，我们通过 `value` 属性来双向绑定组件的值，当用户在穿梭框中进行操作时，我们会触发 `change` 事件并更新组件的值。