Element Plus穿梭框自定义内容

Element Plus是一个基于Vue 3的UI组件库，其中的穿梭框（Transfer）功能允许用户在两个列表之间轻松地拖放和交换数据。为了自定义穿梭框的内容，你可以按照以下步骤操作：

1. 首先，在HTML中设置基本结构，包括两个数据区域`data-source`和`data-target`以及穿梭框组件：

<el-transfer
  :list-source="sourceList"
  :list-target="targetList"
  :props="{ key: 'name', label: 'label' }"
  v-model="transferData"
></el-transfer>

这里`sourceList`和`targetList`是你需要的数据源，`v-model`用于双向绑定穿梭结果。

2. 然后，在JavaScript中定义数据和方法：

export default {
  data() {
    return {
      sourceList: [
        { name: 'Item 1', label: 'Source List 1' },
        // ... 其他源数据项
      ],
      targetList: [
        { name: 'Item 2', label: 'Target List 1' },
        // ... 其他目标数据项
      ],
      transferData: [] // 存储当前穿梭的结果
    };
  },
  methods: {
    handleTransfer(event) {
      this.transferData = event.data; // 更新穿梭后的数据
    }
  }
};

`handleTransfer`方法会在用户完成穿梭操作后被触发，更新数据状态。

3. 如果需要更复杂的定制，比如添加搜索、分页等功能，可以查看Element Plus官方文档，了解如何配置对应的属性和选项。