vue+element-ui根據時間查詢

.Tik發表於2024-07-18
VueUI

查詢頭

        <el-form-item label="檢驗時間：" prop="date">
          <el-date-picker
            v-model="queryParams.date"
            type="date"
            placeholder="請選擇"
            clearable
            size="small"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

表格

<el-table v-loading="loading" :data="tableData1">
          <template slot="empty">
            <div style="height: 500px">
              <img src="@/assets/image/zwsj.png" alt="" />
              <div
                style="
                  display: flex;
                  height: 32px;
                  align-items: center;
                  justify-content: center;
                "
              >
                <p style="color: #333; font-size: 14px">暫無資料</p>
              </div>
            </div>
          </template>
          <el-table-column prop="date" label="時間" :formatter="formatDateTime">
          </el-table-column>
</el-table>

js

// 日期格式轉換
    formatDateTime(row) {
      const rawDateTime = row.date;
      if (rawDateTime) {
        const dateObj = new Date(rawDateTime);
        const year = dateObj.getFullYear();
        const month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
        const date = ("0" + dateObj.getDate()).slice(-2);
        const hours = ("0" + dateObj.getHours()).slice(-2);
        const minutes = ("0" + dateObj.getMinutes()).slice(-2);
        const seconds = ("0" + dateObj.getSeconds()).slice(-2);

        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
      } else {
        return "";
      }
    },

相關文章