工作要点

src/components/date-year/date-year.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="hc-date-year-select hc-flex">
-        <el-date-picker ref="startYearRef" v-model="startYear" type="year" value-format="YYYY" placeholder="计划开工年" :disabled="disabled" :clearable="false" @change="startYearChange" />
+        <el-date-picker ref="startYearRef" v-model="startYears" type="year" value-format="YYYY" placeholder="计划开工年" :disabled="disabled" :clearable="false" @change="startYearChange" />
         <div class="to ml-2 mr-2 text-[14px]">至</div>
-        <el-date-picker ref="endYearRef" v-model="endYear" type="year" value-format="YYYY" placeholder="计划完工年" :clearable="clearable" :disabled="disabled" @change="endYearChange" @blur="endYearBlur" />
+        <el-date-picker ref="endYearRef" v-model="endYears" type="year" value-format="YYYY" placeholder="计划完工年" :clearable="clearable" :disabled="disabled" @change="endYearChange" @blur="endYearBlur" />
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { isNullES } from 'js-fast-way'
 
 defineProps({
@@ -27,12 +27,22 @@ defineOptions({
 
 //双向绑定
 const startYear = defineModel('modelValue', {
+    type: [String, Number],
     default: '',
 })
 const endYear = defineModel('end', {
+    type: [String, Number],
     default: '',
 })
 
+//监听数据改变
+const startYears = ref('')
+const endYears = ref('')
+watch(() => [startYear.value, endYear.value], ([start, end]) => {
+    startYears.value = start ? start + '' : ''
+    endYears.value = end ? end + '' : ''
+}, { deep: true, immediate:true })
+
 //日期选择框ref
 const startYearRef = ref(null)
 const endYearRef = ref(null)