簡(jiǎn)述：在Element UI框架中，Cascader（級(jí)聯(lián)選擇器）和DateTimePicker（日期時(shí)間選擇器）是兩個(gè)非常實(shí)用且常用的組件，它們分別用于日期選擇和多層級(jí)選擇，提供了豐富的交互體驗(yàn)和便捷的數(shù)據(jù)輸入方式。這里來簡(jiǎn)單記錄一下
?一.?日期時(shí)間選擇器，DateTimePicker
<el-date-pickerv-model="timeValue1"type="datetimerange"range-separator="至"start-placeholder="開始日期"end-placeholder="結(jié)束日期"format="yyyy-MM-dd HH:mm:ss" <!-- 顯示格式 -->value-format="yyyy-MM-dd HH:mm:ss" <!-- 綁定值的格式 -->>
</el-date-picker><!-- 日期時(shí)間選擇器 -->
<el-date-pickerv-model="timeValue1" 綁定到 timeValue1 數(shù)據(jù)type="datetimerange" 類型為日期時(shí)間范圍range-separator="至" 范圍分隔符start-placeholder="開始日期" 開始日期占位符end-placeholder="結(jié)束日期" 結(jié)束日期占位符format="yyyy-MM-dd HH:mm:ss" 顯示格式value-format="yyyy-MM-dd HH:mm:ss" 綁定值的格式
></el-date-picker>
二.?級(jí)聯(lián)選擇器，Cascader
<el-cascader:options="options":props="props"collapse-tagsclearablev-model="selectedOptions"
></el-cascader><!-- 級(jí)聯(lián)選擇器 -->
<el-cascaderv-model="selectedOptions" 綁定到 selectedOptions 數(shù)據(jù):options="options" 選擇器選項(xiàng):props="props" 選擇器屬性collapse-tags 收起標(biāo)簽clearable 可清除圖標(biāo)顯示
></el-cascader>
三. 參數(shù)屬性
// 日期時(shí)間選擇參數(shù)
timeValue1: "",// 級(jí)聯(lián)選擇器參數(shù)
options: [],
// ?注意這里的props需要額外配置，否則獲取到的值為undefined
props: {multiple: true,value: "id",label: "label",
},
selectedOptions: [],// 定義參數(shù)數(shù)據(jù)
data() {return {// 日期時(shí)間選擇參數(shù)timeValue1: "", // 綁定日期時(shí)間選擇器的值// 級(jí)聯(lián)選擇器參數(shù)options: [], // 選擇器選項(xiàng)數(shù)據(jù)// ?注意這里的props需要額外配置，否則獲取到的值為undefinedprops: {multiple: true, // 支持多選value: "id", // 選項(xiàng)的值字段label: "label", // 選項(xiàng)的標(biāo)簽字段},selectedOptions: [], // 綁定級(jí)聯(lián)選擇器的值，保存選擇的事件類型id};
},
四. 觸發(fā)事件
choseSearch() {this.tableLoading = true;if (this.timeValue1.length === 0 || this.selectedOptions.length === 0) {console.error("請(qǐng)確保選擇了日期范圍和事件類型");return;}// console.log(this.timeValue1);// console.log(this.selectedOptions);const choseData = this.selectedOptions.map((cur) => {// console.log(cur);return cur[1];});// console.log(choseData);const ecentParams = {startTime: this.timeValue1[0],endTime: this.timeValue1[1],eventTypeIds: choseData,};// console.log(ecentParams);eventData(ecentParams, this.params).then((res) => {console.log(res);if (res.code === 200) {......}});
},// 點(diǎn)擊事件
choseSearch() {this.tableLoading = true; // 設(shè)置表格加載狀態(tài)// 檢查是否選擇了日期范圍和事件類型if (this.timeValue1.length === 0 || this.selectedOptions.length === 0) {console.error("請(qǐng)確保選擇了日期范圍和事件類型");return; // 如果未選擇，退出方法}// 處理選中的事件類型ID，將每個(gè)選中的值的第二個(gè)元素（事件類型ID）提取出來const choseData = this.selectedOptions.map((cur) => {return cur[1];});// 創(chuàng)建查詢參數(shù)對(duì)象const ecentParams = {startTime: this.timeValue1[0], // 設(shè)置開始時(shí)間endTime: this.timeValue1[1], // 設(shè)置結(jié)束時(shí)間eventTypeIds: choseData, // 設(shè)置選中的事件類型ID};// 調(diào)用API方法，傳遞查詢參數(shù)eventData(ecentParams, this.params).then((res) => {console.log(res); // 打印API響應(yīng)結(jié)果if (res.code === 200) {// 處理成功響應(yīng)......}});
},
