如何用vue3实现

在 Vue3 中，实现类似功能的方法与 Vue2 有些不同。以下是基于 Vue3 的实现：

1. 在 setup 函数中，使用 ref 创建一个 selectedConsigneeCompany 变量，用于存储已选择的发货公司。

2. 在 changeConsigneeCompany 方法中，使用 value 属性获取 ref 变量的值，并判断当前选择的发货公司是否已经存在于 selectedConsigneeCompany 中。如果不存在，将其添加到数组中，并执行您想要执行的操作。如果已经存在，则说明用户不是第一次选择该字段，不需要执行任何操作。

代码示例：

<template>
  <div>
    <el-select v-model="item.consigneeCompanyId" placeholder="请选择" filterable clearable style="max-width: 202px" @change="changeConsigneeCompany(item.consigneeCompanyId, index)">
      <el-option v-for="company in companies" :key="company.id" :label="company.name" :value="company.id"></el-option>
    </el-select>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedConsigneeCompany = ref([]); // 存储已选择的发货公司
    const companies = [
      { id: 1, name: '公司A' },
      { id: 2, name: '公司B' },
      { id: 3, name: '公司C' },
    ];

    function changeConsigneeCompany(companyId, index) {
      if (!selectedConsigneeCompany.value.includes(companyId)) {
        // 如果当前选择的发货公司不在数组中，说明用户第一次选择该字段
        selectedConsigneeCompany.value.push(companyId); // 将其添加到数组中
        // 执行您想要执行的操作
      }
    }

    return {
      selectedConsigneeCompany,
      companies,
      changeConsigneeCompany,
    };
  },
};
</script>

注意，Vue3 中 setup 函数与 Vue2 中的 data 和 methods 不同，需要通过 return 返回一个对象，包含需要在模板中使用的变量和方法。同时，变量需要使用 ref 或 reactive 进行包装，方法需要直接定义在 setup 函数中。