vue 穿梭框 回显

在Vue.js中，穿梭框（也称为拖拽选择组件）通常用于数据列表之间进行双向数据绑定和选择的操作。当涉及到回显功能时，如果你有一个预设值需要在初次加载页面时展示在穿梭框内，可以按照以下步骤操作：

1. 定义组件的数据属性：首先，在你的Vue组件的data选项中创建一个数组，表示可以选择的项目，同时定义一个变量来存储当前的选择结果。

data() {
  return {
    items: ['Option 1', 'Option 2', 'Option 3'], // 数据源
    selectedItems: [], // 初始选择的项目
  };
}

2. 初始化回显：在组件的created生命周期钩子或初始化函数中，设置`selectedItems`为预设的值。

created() {
  this.selectedItems = ['Option 1']; // 或者从服务器获取的回显值
}

3. 组件模板：在模板中，使用穿梭框插件（如iview的`<Transfer>`或element-ui的`<el-transfer>`），并绑定`v-model`到`selectedItems`，显示预选项。

<template>
  <el-transfer
    :data="items"
    v-model="selectedItems"
    placeholder="请选择"
    filterable
    show-header
  ></el-transfer>
</template>

4. 更新数据：当你通过用户交互改变穿梭框的选择时，`selectedItems`将自动更新，保持数据同步。