车辆VIN码下拉列表动态显示

车辆VIN码下拉列表动态显示

<FormItem class="margin-bottom-0">
    <span style="font-weight: bold;" class="margin-right-10">车辆选择(VIN)</span>
    <Select v-model="searchConf.vselect" placeholder='请选择VIN' style="width:250px">
    // v-for遍历vinList数组，为每一个VIN创建一个选项
    <Option v-for="vin in vinList" :key="vin" :value="vin">{{ vin }}</Option>
    </Select>
</FormItem>

import { getList } from '@/api/device-manage'

export default {
  data () {
    return {
      .......
      // 初始化一个空数组用于存放 VIN 数据
      vinList: [],
      ......
    }
  },
  mounted () {
    let vm = this
    ......
    // 在组件挂载时调用获取 VIN 列表
    vm.fetchVinList()
  },
  methods: {
    // 获取 VIN 列表数据
    fetchVinList () {
      // 将当前组件实例保存到变量 vm 中
      let vm = this
      // 调用 getList 方法获取 VIN 列表数据
      getList().then(response => {
        // console.log(response.data.data.list)
        // 使用 map 方法从列表数据中提取 vin 字段，生成一个新的数组 vm.vinList
        vm.vinList = response.data.data.list.map(item => item.vin)
        // 如果获取到的 VIN 列表长度大于 0，将第一个 VIN 设置为默认选中项
        if (vm.vinList.length > 0) {
          // 将第一个 VIN 设置为 searchConf.vselect 的值
          vm.searchConf.vselect = vm.vinList[0]
        }
      })
        .catch(error => {
          console.error('获取 VIN 列表失败：', error)
        })
    },
    ......
  }
}