筛选列表优化

src/views/homesteadSurvey/list.vue

@@ -498,10 +498,10 @@
           </div>
 
           <div style="padding: 10px 15px;">
-            <van-checkbox name="all" shape="square" v-model="checkAllFlag" @click="checkAll">全选</van-checkbox>
+            <van-checkbox name="all" shape="square" v-model="checkAllFlag" @click="checkAllArray">全选</van-checkbox>
             <div style="height: 15px;"></div>
-            <van-checkbox-group v-model="checked" @change="handleChecked">
-              <van-checkbox name="fsssSx"  shape="square" style="margin-bottom: 5px;" id="fsssSx">
+            <van-checkbox-group v-model="checked" @change="handleChecked" ref="checkboxGroup">
+              <van-checkbox name="fsssSx" shape="square" style="margin-bottom: 5px;" id="fsssSx">
                 <template #default>
                   附属设施<span style="display: inline-block;background: #00FFFF;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
                 </template>
@@ -1152,6 +1152,7 @@
     import { listVillage} from "@/api/homesteadSurvey/village";
     import $ from "jquery";
     import {Dialog} from "vant";
+    import {ref} from "vue";
     export default {
       name: "homesteadList",
       data() {
@@ -1166,6 +1167,9 @@
           totalH:0,
           // 总人数
           totalR:0,
+          zjdSx:true,
+          zrzSx :true,
+          fsssSx:true,
           showhncysjly:false,
           showhzsjly:false,
           showhncycybz:false,
@@ -1274,7 +1278,7 @@
           mapTownList: null,
           mapVillageList: null,
           coordinate:"",
-          checked:[],
+          checked:['zjdSx', 'zrzSx', 'fsssSx'],
           checkAllMap: false,
           sx:"",
           //搜索---start
@@ -1300,8 +1304,9 @@
           dataForm: {
             imageUrl: []
           },
-          dataList: [["fsssSx"],["zjdSx"],["zrzSx"]]
+          dataList: [["fsssSx"],["zjdSx"],["zrzSx"]],
           //地图使用 --end
+          checkBoxAll:[]
         };
       },
       mounted(){
@@ -4274,7 +4279,7 @@
         },
         homesteadListShrink() {
           this.selectionIconShow = false;
-          this.checked =[["zjdSx"],["zrzSx"],["fsssSx"]];
+          // this.checked =["zjdSx","zrzSx","fsssSx"];
           $(".homesteadList_wrap").animate(
             {
               right: "-300px",
@@ -4364,8 +4369,22 @@
         toggleSearch() {
           $("#query").trigger("click");
         },
+        //
+        checkAllArray(value){
+          if(this.checked.length<3){
+            this.$refs.checkboxGroup.toggleAll(true);
+          }else{
+            this.$refs.checkboxGroup.toggleAll(false);
+          }
+        },
         //筛选//全选
         checkAll(val) {
+
+          this.$refs.checkboxGroup.value.toggleAll(true);
+
+          console.log(this.checkAllFlag)
+
+          return;
           let checkedCount = this.CheckedAllArr.length
           if (val) {
             //全选
@@ -4379,9 +4398,19 @@
           }
         },
         //单选
-        handleChecked() {
-          this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length;
-          console.log(this.checkAllFlag);
+        handleChecked(value) {
+          // this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length;
+          if (value.length<3){
+            this.checkAllFlag = false;
+          }else{
+            this.checkAllFlag = true;
+          }
+          value.indexOf('zjdSx') == -1 ? this.zjdSx = false : this.zjdSx = true;
+          value.indexOf('zrzSx') == -1 ? this.zrzSx = false : this.zrzSx = true;
+          value.indexOf('fsssSx') == -1 ? this.fsssSx = false : this.fsssSx = true;
+          console.log(this.zjdSx)
+          console.log(this.zrzSx)
+          console.log(this.fsssSx)
         },
         closeSearchBox(){
           this.showSearch = false ;
@@ -4422,7 +4451,7 @@
           this.$router.push({path:'/homesteadSurvey/add'});
         }
 
-      }
+      },
     }
 </script>