漏提

src/layout/components/CarBrandSelector/index.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+      <el-cascader
+        :options="options"
+        :props="cascaderProps"
+        v-model="selectedOptions"
+        @visible-change="handleVisibleChange"
+        :filter-method="handleFilter"
+        placeholder="请选择"
+        filterable
+        :show-all-levels="false"
+      />
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+        brandId: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+      return {
+        options: [], // 存储级联选项数据
+        selectedOptions: [], // 存储已选择的选项
+        loading: false, // 标志是否在加载数据
+      };
+    },
+    computed: {
+      cascaderProps() {
+        return {
+          lazy: true, // 启用懒加载
+          lazyLoad: this.loadData, // 懒加载方法
+          value: 'value',
+          label: 'label',
+          children: 'children',
+          emitPath: false,
+          multiple: false // 多选模式
+        };
+      },
+    },
+    methods: {
+      // 当可见状态变化时触发
+      handleVisibleChange(visible) {
+        if (visible && this.options.length === 0) {
+          this.loadData(null, [], (options) => {
+            this.options = options;
+          });
+        }
+      },
+      // 懒加载数据方法
+      loadData(node, resolve) {
+        if (node) {
+          // 模拟异步加载子节点数据
+          setTimeout(() => {
+            const children = [
+              { value: 'child1', label: '子节点 1' },
+              { value: 'child2', label: '子节点 2' },
+            ];
+            resolve(children);
+          }, 100);
+        } else {
+          // 模拟异步加载根节点数据
+          setTimeout(() => {
+            const root = [
+              { value: 'root1', label: '根节点 1' },
+              { value: 'root2', label: '根节点 2' },
+            ];
+            resolve(root);
+          }, 100);
+        }
+      },
+      // 处理过滤方法
+      handleFilter(inputValue, path) {
+        console.log('Filtering:', inputValue);
+        // 模拟请求
+        setTimeout(() => {
+          const filteredOptions = [
+            {
+              value: 'filtered1',
+              label: `Filtered ${inputValue} 1`,
+              children: [
+                { value: 'filtered1-1', label: `Filtered ${inputValue} 1-1` },
+                { value: 'filtered1-2', label: `Filtered ${inputValue} 1-2` },
+              ],
+            },
+            {
+              value: 'filtered2',
+              label: `Filtered ${inputValue} 2`,
+              children: [
+                { value: 'filtered2-1', label: `Filtered ${inputValue} 2-1` },
+                { value: 'filtered2-2', label: `Filtered ${inputValue} 2-2` },
+              ],
+            },
+          ];
+          this.options = filteredOptions;
+        }, 1000); // 模拟延迟
+      },
+    },
+  };
+  </script>
+  

src/views/base/carmain/components/CustomerCarForm.vue

@@ -73,7 +73,7 @@
         </div>
         <el-row>
           <el-empty v-if="formData.cusList.length == 0" description="暂无客户信息" :image-size="100"></el-empty>
-          <el-col v-for="item in formData.cusList" :span="8">
+          <el-col v-for="item in formData.cusList" :span="8" :key="item.id">
             <el-card shadow="hover">
               <el-descriptions>
                 <template slot="title">