文章目錄
- 參考文檔
- 效果展示
- 實現過程
參考文檔
提示：這里可以添加本文要記錄的大概內容：
DatePicker 日期選擇框
大佬：搬磚小匠（Ant Design vue 只選擇年）
提示：以下是本篇文章正文內容，下面案例可供參考
效果展示
實現過程
- 用于實現一個年份選擇器的功能
a-date-picker組件的 mode 屬性設置為 “year”，使其成為一個年份選擇器。- v-model 雙向綁定了一個名為
model.year的變量，用于與選擇的年份數據同步。 - 通過監聽
a-date-picker組件的openChange和panelChange事件，控制選擇年組件的顯示和隱藏，并將選擇的年份賦值給model.year變量。
<a-col :span="12"><a-form-model-item :label="$t('maMatchItem.form.year')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year"><a-date-pickerplaceholder="請選擇年"mode="year"v-model="model.year":open="dataopen"format="YYYY":allowClear="false"@openChange="openChangeYear"@panelChange="panelChangeYear"style="width: 100%"/></a-form-model-item></a-col>
在上面代碼中要格外注意引號里面的內容： 別照抄
v-model="model.year"
model：是不是與系統對應
year：是不是與數據庫字段對應
- 引入了 moment 庫，用于對時間和日期進行操作和格式化。
- moment 是 JavaScript 日期處理庫，可用于解析、驗證、操作和顯示日期和時間。在本例中，它被用于處理年份的數據類型和格式化顯示。
import moment from "moment"
- 這段代碼的作用是在當前 Vue 組件中注冊 moment 庫的全局組件，以便在組件中使用 moment 庫提供的所有方法和屬性。
- 這個組件是在組件的內部注冊的。這樣就可以在 templates 中使用一些 moment 相關的過濾器，例如：{{ someDate | moment(‘YYYY-MM-DD’) }}。
export default {components: {moment},}
- 這段代碼定義了Vue組件中的data數據對象，用于存儲組件中需要響應式更新的數據。具體來說，它包含以下幾個屬性：
dataopen: 用于表示彈框是否打開，初始值為false，意味著默認情況下不打開彈框。year: 用于存儲當前選中的年份，初始值為當前時間的moment對象，即當前年份。model: 用于存儲組件中需要發送給后臺查詢數據的參數，它是一個包含year屬性的對象，初始值為當前時間的moment對象，即當前年份。
這些數據在組件中可以直接使用和修改。同時由于使用了Vue的響應式數據機制，當這些數據發生改變時，相關的組件視圖也會自動更新。
data () {return {dataopen: false, // 默認是否打開彈框year: moment(),userId: '', // 保存用戶idmodel:{// 對當前年格式進行校驗year:moment().format("YYYY"),},} }
- Vue組件中定義的兩個方法，用于實現日期選擇功能
openChangeYear(status)：當點擊選擇框時，根據傳入的狀態打開或關閉日期組件用于選擇年份。panelChangeYear(value)：當選擇年份后，將用戶選擇的年份存儲到model.year中，并關閉日期組件彈框。
這些方法主要用于在用戶選擇年份時，處理日期組件的打開和關閉、以及將選擇的年份存儲到可用于查詢的參數中。
methods: {// 點擊選擇框事件 彈出日期組件選擇年openChangeYear(status) {if (status) {this.dataopen = true;} else {this.dataopen = false;}},// 選擇年之后 關閉彈框panelChangeYear(value){this.model.year = value.format('YYYY');this.dataopen = false;},
這行代碼是對格式進行校驗
this.model.year = value.format('YYYY');
否則會出現下面報錯：
Data truncation: Data too long for column ‘year’ at row 1
)
