切换选择组件

src/main.ts

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "@/utils/rem";
-import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Tooltip, Select, Option, OptionGroup } from 'element-ui';
+import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Tooltip, Select, Option, OptionGroup, Cascader } from 'element-ui';
 
 Vue.config.productionTip = false;
 
@@ -23,6 +23,7 @@ Vue.use(Tooltip)
 Vue.use(Select)
 Vue.use(Option)
 Vue.use(OptionGroup)
+Vue.use(Cascader)
 
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$message = Message;

src/views/aiSearch/index.vue

@@ -57,16 +57,14 @@
         <div class="row">
           <div class="col-label">摄像头：</div>
           <div>
-            <el-select v-model="queryData.cameraList" filterable multiple placeholder="请选择">
-              <el-option-group v-for="group in cameraGroup" :key="group.label" :label="group.label">
-                <el-option
-                  v-for="item in group.options"
-                  :key="item.cameraId"
-                  :label="item.cameraName"
-                  :value="item.cameraId"
-                ></el-option>
-              </el-option-group>
-            </el-select>
+            <el-cascader
+              :options="cameraGroup"
+              :props="{ multiple: true }"
+              filterable
+              collapse-tags
+              clearable
+              @change="cameraChange"
+            ></el-cascader>
           </div>
         </div>
         <div class="btn-container">
@@ -194,10 +192,20 @@ export default class AiSearch extends BaseVue {
     this.query();
     const data = await getCameraDogFormate({});
     if (data) {
+      const ar = [];
       Object.keys(data).forEach((key) => {
-        this.cameraGroup.push({ label: key, options: [...data[key]] });
+        ar.push({
+          value: key,
+          label: key,
+          children: data[key].map((d) => ({
+            label: d.cameraName,
+            value: d.cameraId,
+          })),
+        });
       });
+      this.cameraGroup = ar;
     }
+    console.log("aaaa", this.cameraGroup);
   }
   mounted() {
     this.$nextTick(() => {
@@ -210,7 +218,7 @@ export default class AiSearch extends BaseVue {
       ...this.queryData,
     });
 
-    this.dogs = rp.data.records;
+    this.dogs = rp.data?.records || [];
     this.total = rp.data.total;
   }
   handleQuery() {
@@ -246,6 +254,16 @@ export default class AiSearch extends BaseVue {
     this.showVideo = false;
     this.myVideo.player.pause();
   }
+  cameraChange(data: any) {
+    if (data.length == 0) {
+      this.queryData.cameraList = [];
+      return;
+    }
+    data.forEach((item) => {
+      this.queryData.cameraList.push(item[1]);
+    });
+    console.log("cameraChange", this.queryData);
+  }
 }
 </script>
 
@@ -425,13 +443,25 @@ export default class AiSearch extends BaseVue {
     .el-table--group {
       border: $border-color;
     }
-  }
-  .el-date-editor.el-input,
-  .el-date-editor.el-input__inner {
-    width: 100%;
-  }
-  .el-select {
-    width: 100%;
+    .el-date-editor.el-input,
+    .el-date-editor.el-input__inner {
+      width: 100%;
+    }
+    .el-select {
+      width: 100%;
+    }
+    .el-cascader {
+      width: 100%;
+    }
+    .el-cascader__search-input {
+      color: #fff;
+      background-color: $item-background-color;
+    }
+    .el-tag.el-tag--info {
+      background-color: $item-background-color;
+      border-color: #e9e9eb;
+      color: #fff;
+    }
   }
 }
 </style>