el-transfer从左边向右边添加数据的按钮怎么写方法

在Element UI的el-transfer组件中，如果你想让用户通过点击某个按钮从左侧向右侧添加数据，你需要先准备一些数据源并设置transfer的基本配置。以下是一个简单的示例，展示如何在按钮点击事件中添加新的数据项：

<template>
  <el-transfer
    :data="leftList"
    :filter-method="filterMethod"
    :props="{ key: 'id', label: 'name' }"
    :show-header="true"
    left-default-checked="[]"
    right-default-checked="[]"
    :on-success="handleSuccess"
    @right-click="handleRightClick"
  ></el-transfer>

  <button @click="addData">添加到右边</button>
</template>

<script>
export default {
  data() {
    return {
      leftList: [], // 左侧的数据源
      rightList: [] // 右侧的数据源
    };
  },
  methods: {
    addData() {
      const newItem = { id: Date.now(), name: '新添加的项目' }; // 新数据项
      this.leftList.push(newItem); // 添加到左侧列表
      this.handleSuccess({ source: 'left', target: 'right', data: newItem }); // 触发成功回调，将新项目添加到右边
    },
    
    handleSuccess(result) {
      console.log('数据已成功移动', result);
      if (result.data) {
        this.rightList.push(result.data); // 将已选中的数据添加到右侧
      }
    },
    
    filterMethod(item, search) {
      // 这里可以自定义过滤规则，例如按名称搜索等
      return item.name.includes(search);
    },
    
    handleRightClick(event, node) {
      // 如果右键点击的是某个元素，则在此处理操作
    }
  }
};
</script>

在这个例子中，`addData`方法用于创建一个新的数据项，并将其添加到左侧列表。然后在`handleSuccess`方法中，我们触发转移成功的回调，将新项目从左侧移到右侧。同时，如果你需要在用户右键点击时执行特定操作，可以在`handleRightClick`方法中处理。