首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 Transfer 组件：
<template>
<div>
<h3>Element-React Transfer 穿梭框</h3>
<el-transfer
v-model="transferData"
:data="transferOptions"
:titles="['Source', 'Target']"
:format="formatFn"
filterable
></el-transfer>
<p>已选中的数据：{{ transferData }}</p>
</div>
</template>
<script>
import { ElTransfer } from 'element-react';
export default {
components: {
ElTransfer,
},
data() {
return {
transferData: [], // 选中的数据
transferOptions: [
{ key: '1', label: 'Option 1' },
{ key: '2', label: 'Option 2' },
{ key: '3', label: 'Option 3' },
{ key: '4', label: 'Option 4' },
{ key: '5', label: 'Option 5' },
], // 穿梭框的选项数据
};
},
methods: {
formatFn({ key, label }) {
return `${label} (${key})`;
},
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElTransfer 组件，并在模板中使用它。通过调整 transferData 和 transferOptions 数据属性，你可以自定义穿梭框的选项和已选中的数据。
我们还设置了 titles 属性来定义穿梭框的两个列表的标题，设置了 filterable 属性以启用搜索功能。可以根据 Element-React 的文档和组件属性来进一步自定义 Transfer 组件的外观和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5612/Element-React