时间选择器取消范围没有隐藏问题

src/views/assistance/index.vue

@@ -67,12 +67,19 @@
         <!--表单类 -->
         <van-popup v-model="showPopup" position="bottom">
             <van-datetime-picker v-if="showStart" v-model="serviceTimeStart" type="datetime" title="开始时间"
-                @confirm="handelCLickConfirmStart" @cancel="showPopup = false" :min-date="minDate" />
+                @confirm="handelCLickConfirmStart" @cancel="showPopup = false,showStart=false" :min-date="minDate" />
             <van-datetime-picker v-if="showEnd" v-model="serviceTimeEnd" @confirm="handelCLickConfirmEnd"
-                @cancel="showPopup = false" type="datetime" title="结束时间" :min-date="minDate" />
+                @cancel="showPopup = false,showEnd = false" type="datetime" title="结束时间" :min-date="minDate" />
-            <van-cascader v-if="showTree" v-model="cascaderValue" title="请选择范围" :options="treeOptions"
+            <van-cascader v-if="showTree" v-model="cascaderValue" :options="treeOptions"
                 @close="showTree = false, showPopup = false" @change="onChange"
-                :field-names="{ text: 'objectName', value: 'objectId' }" />
+                :field-names="{ text: 'objectName', value: 'objectId' }" :closeable="false" >
+                <template #title>
+                        <div class="flex flex-end">
+                            <span>选择范围</span>
+                            <span @click="showPopup=false,showTree=false">完成</span>
+                        </div>
+                </template>
+            </van-cascader>
         </van-popup>
     </div>
 </template>
@@ -438,4 +445,8 @@ export default {
 }
 </script>
 
-<style lang='less' scoped></style>
+<style lang='less' scoped>
+:deep(.van-cascader__title){
+    width: 100%;
+}
+</style>

src/views/assistanceDetail/index.vue

@@ -132,13 +132,17 @@
             </van-radio-group>
         </van-dialog>
         <van-popup v-model="showPopup" position="bottom">
-            <van-datetime-picker v-if="showStart" v-model="serviceTimeStart" type="datetime" title="开始时间"
+            <van-datetime-picker v-if="showStart" v-model="serviceTimeStart" type="datetime" title="开始时间"  @confirm="handelCLickConfirmStart" @cancel="showPopup = false,showStart=false" :min-date="minDate" />
-                @confirm="handelCLickConfirmStart" @cancel="showPopup = false" :min-date="minDate" />
             <van-datetime-picker v-if="showEnd" v-model="serviceTimeEnd" @confirm="handelCLickConfirmEnd"
-                @cancel="showPopup = false" type="datetime" title="结束时间" :min-date="minDate" />
+                @cancel="showPopup = false,showEnd=false" type="datetime" title="结束时间" :min-date="minDate" />
-            <van-cascader v-if="showTree" v-model="cascaderValue" title="请选择范围" :options="treeOptions"
+            <van-cascader v-if="showTree" v-model="cascaderValue" title="" :options="treeOptions" :closeable="false"   @change="onChange" :field-names="{ text: 'objectName', value: 'objectId' }" >
-                @close="showTree = false, showPopup = false" @change="onChange"
+                <template #title>
-                :field-names="{ text: 'objectName', value: 'objectId' }" />
+                        <div class="flex flex-end">
+                            <span>选择范围</span>
+                            <span @click="showPopup=false,showTree=false">完成</span>
+                        </div>
+                </template>
+            </van-cascader>
         </van-popup>
     </div>
 </template>
@@ -380,7 +384,9 @@ export default {
 :deep(.van-button--small) {
     padding: 12px 30px;
 }
-
+:deep(.van-cascader__title){
+    width: 100%;
+}
 a {
     border: 1px solid #ebedf0;
     color: #333333;