日期选择器及表头自定义

    <template>
      <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="年份" prop="yearTank" style="width: 200px;">
        <el-date-picker
            v-model="queryParams.yearTank"
            type="year"
            value-format="YYYY/MM/DD"
            :disabled-date="disabledDate"
            placeholder="选择查询年份"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQueryYear">搜索</el-button>
        <el-button type="info" icon="Refresh" @click="resetQueryYear">重置</el-button>
        <el-button type="warning" icon="Upload" @click="handleExports">导出</el-button>
      </el-form-item>
    </el-form>
    
    
    <el-table v-loading="loading" :data="tankList" :show-header="yearHeader" stripe>
      <el-table-column label="罐号" align="center" prop="tankNo"/>
      <el-table-column :label="nyearTankYYYY+'年使用累计'" align="center" prop="lastYearUseNum"/>
      <el-table-column :label="yearTankYYYY+'年使用累计'" align="center">
        <el-table-column label="1月" align="center" prop="januaryUseNum.stringValue"/>
        <el-table-column label="2月" align="center" prop="februaryUseNum.stringValue"/>
        <el-table-column label="3月" align="center" prop="marchUseNum.stringValue"/>
        <el-table-column label="4月" align="center" prop="aprilUseNum.stringValue"/>
        <el-table-column label="5月" align="center" prop="mayUseNum.stringValue"/>
        <el-table-column label="6月" align="center" prop="juneUseNum.stringValue"/>
        <el-table-column label="7月" align="center" prop="julyUseNum.stringValue"/>
        <el-table-column label="8月" align="center" prop="augustUseNum.stringValue"/>
        <el-table-column label="9月" align="center" prop="septemberUseNum.stringValue"/>
        <el-table-column label="10月" align="center" prop="octoberUseNum.stringValue"/>
        <el-table-column label="11月" align="center" prop="novemberUseNum.stringValue"/>
        <el-table-column label="12月" align="center" prop="decemberUseNum.stringValue"/>
      </el-table-column>
    
    
      <el-table-column label="合计" align="center" prop="sum"/>
    </el-table>
      </div>
    </template>
    
    <script setup name="SteelConfiguration">
    
    import {listYear} from "@/api/transport/tank";
    
    const {proxy} = getCurrentInstance();
    const yearHeader = ref(false);
    const loading = ref(true);
    const tankList = ref([]);
    const showSearch = ref(true);
    const yearTankYYYY = ref();
    const nyearTankYYYY = ref();
    
    
    const data = reactive({
      queryParams: {
    pageNum: 1,
    pageSize: 10,
    yearTank: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
    
      },
    });
    
    const {queryParams,} = toRefs(data);
    
    /** 查询铁水罐使用列表 */
    function getList() {
      yearHeader.value = true;
      const yearv = queryParams.value.yearTank;
      console.log("yearv", yearv);
      yearTankYYYY.value = yearv.substring(0, 4);
      nyearTankYYYY.value = yearTankYYYY.value - 1;
      loading.value = true;
      listYear(queryParams.value).then(response => {
    tankList.value = response.rows;
    loading.value = false;
      });
    }
    
    /** 搜所导出的年份数据按钮操作 */
    function handleQueryYear() {
      queryParams.value.pageNum = 1;
      getList();
    }
    
    /** 重置按钮操作 */
    function resetQueryYear() {
      proxy.resetForm("queryRef");
      handleQueryYear();
    }
    
    /** 导出按钮操作 */
    function handleExports() {
      if (queryParams.value.yearTank == null) {
    proxy.$modal.alert("请先选择年份");
      } else {
    const yearv = queryParams.value.yearTank;
    proxy.download('scada/tankInfo/export', {
      ...queryParams.value
    }, `铁水罐使用统计${yearv.substring(0, 4)}.xlsx`)
      }
    }
    
    function disabledDate(time) {
      return time.getTime() > Date.now()- 8.64e7 ;
    }
    
    getList();
    
    </script>