vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

要使用 Element Transfer 实现 AJAX 请求数据和自定义查询，你需要进行以下步骤：

1. 使用 Element Transfer 组件，并在 data 中定义左侧列表数据和右侧列表数据，如下所示：

<template>
  <el-transfer
    v-model="transferData"
    :data="transferData"
    :titles="['Source', 'Target']"
    :filterable="true"
    :filter-method="filterMethod"
    :format="format"
  ></el-transfer>
</template>

<script>
export default {
  data() {
    return {
      transferData: {
        list: [], // 数据列表
        total: 0, // 数据总数
        loading: false, // 数据是否正在加载
      },
    };
  },
  methods: {
    // 自定义查询方法
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    // 格式化列表项
    format(item) {
      return item.label;
    },
  },
};
</script>

2. 在 mounted 生命周期中调用 AJAX 请求，获取左侧列表的数据。在请求过程中，可以使用 loading 属性控制加载状态。请求完成后，将数据赋值给 transferData.list，如下所示：

<template>
  <el-transfer
    v-model="transferData"
    :data="transferData"
    :titles="['Source', 'Target']"
    :filterable="true"
    :filter-method="filterMethod"
    :format="format"
  ></el-transfer>
</template>

<script>
export default {
  data() {
    return {
      transferData: {
        list: [], // 数据列表
        total: 0, // 数据总数
        loading: false, // 数据是否正在加载
      },
    };
  },
  methods: {
    // 自定义查询方法
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    // 格式化列表项
    format(item) {
      return item.label;
    },
    // AJAX 请求数据
    async fetchData() {
      try {
        this.transferData.loading = true;
        const response = await axios.get('/api/data');
        this.transferData.list = response.data;
        this.transferData.total = response.data.length;
      } catch (error) {
        console.error(error);
      } finally {
        this.transferData.loading = false;
      }
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

3. 在 filterMethod 中，使用查询参数来过滤左侧列表的数据。在这个例子中，我们使用了 label 属性作为过滤字段。如果需要使用其他字段进行过滤，可以修改 filterMethod 方法中的代码。

4. 在 format 方法中，对列表项进行格式化。在这个例子中，我们只是简单地返回了列表项的 label 属性，如果需要对列表项进行其他操作，可以修改 format 方法中的代码。

至此，你已经成功地使用 Element Transfer 实现了 AJAX 请求数据和自定义查询。