vue + elementUI实现左右列表联动

实现左右列表联动，可以使用 ElementUI 的 Transfer 组件。该组件提供了两个列表，左边为未选中的数据列表，右边为已选中的数据列表，可以通过拖拽或者点击按钮来进行数据的移动。

具体实现步骤如下：

1. 引入 ElementUI 的 Transfer 组件和相关样式文件。

import { Transfer } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

2. 在模板中使用 Transfer 组件，并传入需要展示的数据列表和相关配置项。

<template>
  <el-transfer
    :data="dataList"
    :left-default-checked="[1, 3]"
    :right-default-checked="[2, 4]"
    :titles="['未选中', '已选中']"
    :button-texts="['>', '<']"
    :filterable="true"
    filter-placeholder="请输入关键字"
    :format="format"
    @change="handleChange"
  />
</template>

其中，dataList 表示数据列表，left-default-checked 和 right-default-checked 表示默认选中的数据项，titles 表示左右两个列表的标题，button-texts 表示操作按钮的文字，filterable 表示是否支持搜索过滤，filter-placeholder 表示搜索框的提示文本，format 是一个函数，用来格式化每个选项的展示文本，handleChange 是组件的 change 事件回调函数。

3. 在脚本中定义 dataList 数据列表，并实现 format 和 handleChange 函数。

<script>
export default {
  data() {
    return {
      dataList: [
        { key: 1, label: '选项1' },
        { key: 2, label: '选项2' },
        { key: 3, label: '选项3' },
        { key: 4, label: '选项4' }
      ]
    }
  },
  methods: {
    format({ label, key }) {
      return `${label} (${key})`
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
    }
  }
}
</script>

其中，format 函数接收一个参数，该参数包含当前选项的 label 和 key，需要返回一个字符串，用来展示在列表中。handleChange 函数接收三个参数，分别为目标列表的 key 数组，操作类型和移动的 key 数组。

这样，就可以实现左右列表联动的效果了。