描述：vue項(xiàng)目中如果在一個(gè)頁(yè)面使用多個(gè)時(shí)間選擇器組件時(shí)，不同的時(shí)間選擇器需要分別分開(kāi)工作

解決方案一

原本是想直接每一個(gè)時(shí)間選擇器都安排一套相對(duì)獨(dú)立的維生系統(tǒng)，但是到后面發(fā)現(xiàn)繁瑣至極，而且報(bào)錯(cuò)，果斷放棄！！！

解決方案二

利用vue框架自帶的：watch 監(jiān)聽(tīng)屬性配合change綁定事件就可以解決這個(gè)問(wèn)題。(代碼僅做參考)

<template><div style="margin-top: 15px"><!-- 第一行：一個(gè)餅狀圖+兩個(gè)表格，餅圖放中間 --><el-row :gutter="20" class="gaid-title"><el-col :span="8"><div class="grid-content"><div class="title_hh"><h4>員工排行</h4></div><div class="box_box"><el-table :data="tableData" v-loading="loading" height="330"><el-table-column label="排名" align="center"><template slot-scope="scope"><span v-if="scope.row.index == 0" class="font red">1</span><span v-else-if="scope.row.index == 1" class="font green">2</span><span v-else-if="scope.row.index == 2" class="font plue">3</span><span v-else class="fontmini">{{ scope.row.index + 1 }}</span></template></el-table-column><el-table-column label="部門(mén)" prop="depart" /><el-table-column label="姓名" prop="employee_name" /><el-table-column label="預(yù)約數(shù)" prop="reserve_count" /><el-table-column label="來(lái)訪數(shù)" prop="visitor_count" /><el-table-column label="總數(shù)" prop="total" /></el-table></div></div></el-col><el-col :span="9"><div class="grid-content"><div class="title_hh"><h4>預(yù)約環(huán)形圖</h4></div><div class="box_box"><el-row :gutter="10" style="margin-left: 10px"><el-selectsize="mini"v-model="company_no"placeholder="選擇查詢公司"@change="getcompany(company_no)"clearable><el-optionv-for="item in departs":key="item.value":label="item.label":value="item.value"></el-option></el-select><!-- 在這里綁定了多個(gè)change事件，希望順次執(zhí)行 --><!-- 思路：利用監(jiān)聽(tīng)屬性來(lái)獲取時(shí)間的數(shù)據(jù)變化，然后把最新的值賦值到對(duì)應(yīng)數(shù)據(jù)上去，最后按條件重新獲取數(shù)據(jù)，妙呀！！！ --><el-date-pickerstyle="margin-left: 8px"size="mini"v-model="datatime"type="daterange"unlink-panelsrange-separator="至"start-placeholder="開(kāi)始日期"end-placeholder="結(jié)束日期"value-format="yyyy-MM-dd":picker-options="pickerOptions"@change="getPieData(), getTime(datatime)"></el-date-picker><el-buttontype="primary"@click="refresh"size="mini"style="margin-left: 8px">刷新</el-button></el-row><div class="centerrigin" style="margin-top: 30px"><annUlar :ring1="ring1" :ring2="ring2" :legend="legendData" /></div></div></div></el-col><el-col :span="7"><div class="grid-content"><div class="title_hh"><h4>訪客排行</h4></div><div class="box_box"><el-table :data="tableData1" v-loading="loading" height="330"><el-table-column label="排名" align="center"><template slot-scope="scope"><span v-if="scope.row.index == 0" class="font red">1</span><span v-else-if="scope.row.index == 1" class="font green">2</span><span v-else-if="scope.row.index == 2" class="font plue">3</span><span v-else class="fontmini">{{ scope.row.index + 1 }}</span></template></el-table-column><!-- <el-table-column label="部門(mén)" prop="depart" /> --><el-table-column label="姓名" prop="visitor_name" /><el-table-column label="預(yù)約數(shù)" prop="reserve_count" /><el-table-column label="來(lái)訪數(shù)" prop="visitor_count" /><el-table-column label="總數(shù)" prop="total" /></el-table></div></div></el-col></el-row><!-- 第二行：兩個(gè)折線圖 --><div class="bottom"><el-row :gutter="20" class="gaid-title"><el-col :span="12"><div class="grid-content"><div class="title_hh"><h4>預(yù)約折線圖</h4></div><div class="box_box"><el-row :gutter="10" style="margin-left: 25px"><el-form inline><el-form-item label="公司查詢"><el-selectv-model="company_no2"placeholder="選擇查詢公司"@change="getcompany2(company_no2)"clearable><el-optionv-for="item in companylist":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="時(shí)間查詢"><el-date-pickerv-model="datatime2"type="daterange"unlink-panelsrange-separator="至"start-placeholder="開(kāi)始日期"end-placeholder="結(jié)束日期"value-format="yyyy-MM-dd":picker-options="pickerOptions"@change="getTime(datatime2), getOrderDate()"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="refresh2">刷新</el-button></el-form-item></el-form></el-row><lineChart:xdata="xdata":y1="y1":y2="y2":y3="y3":y4="y4":legend="headData"/></div></div></el-col><el-col :span="12"><div class="grid-content"><div class="title_hh"><h4>部門(mén)統(tǒng)計(jì)圖</h4></div><div class="box_box"></div></div></el-col></el-row></div></div>
</template><script>
// 員工排名
import { personnelData } from "@/api/commpy/chart";
// 訪客排名
import { visitorData } from "@/api/commpy/chart";
// 獲取公司列表
import { getJson } from "@/api/user";
// 餅狀圖
import annUlar from "../../components/visitTu";
import { ringData } from "@/api/commpy/chart";
// 預(yù)約統(tǒng)計(jì)圖
import lineChart from "../../components/visitTu/linechart.vue";
import { lineData } from "@/api/commpy/chart";
export default {components: { annUlar, lineChart },data() {return {loading: true,// 員工排行表格數(shù)據(jù)tableData: [],// 訪客排行表格數(shù)據(jù)tableData1: [],// 餅圖數(shù)據(jù)departs: [],ring1: [],ring2: [],legendData: [],company_no: "",datatime: [],queryParams: {start_date: undefined,end_date: undefined,},// 預(yù)約折線圖數(shù)據(jù)companylist: [],company_no2: undefined,datatime2: [],xdata: [],y1: [],y2: [],y3: [],y4: [],headData: [],queryParams2: {company_no: "",start_date: undefined,end_date: undefined,},// 時(shí)間查詢轉(zhuǎn)換pickerOptions: {shortcuts: [{text: "最近一周",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit("pick", [start, end]);},},{text: "最近十五天",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);picker.$emit("pick", [start, end]);},},{text: "最近一個(gè)月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", [start, end]);},},{text: "最近三個(gè)月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit("pick", [start, end]);},},{text: "最近六個(gè)月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);picker.$emit("pick", [start, end]);},},{text: "最近一年",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);picker.$emit("pick", [start, end]);},},],},};},created() {// 獲取雙環(huán)圖數(shù)據(jù)this.getPieData();this.getEmpeeList();this.getVisitList();this.getCompanyList();this.getOrderDate();},// 直接通過(guò)這個(gè)監(jiān)聽(tīng)時(shí)間數(shù)據(jù)的變化，然后把新數(shù)據(jù)賦值上去，最后再已經(jīng)獲取到新數(shù)據(jù)的情況下請(qǐng)求新的數(shù)據(jù)，秒呀watch: {datatime: function (val) {this.queryParams.start_date = val[0];this.queryParams.end_date = val[1];},datatime2: function (val) {this.queryParams2.start_date = val[0];this.queryParams2.end_date = val[1];},},methods: {// 獲取餅圖數(shù)據(jù)getPieData() {ringData(this.queryParams).then((res) => {this.ring1 = res.data.data[0];this.ring2 = res.data.data[1];this.legendData = res.data.legend_data;});},// 員工排行g(shù)etEmpeeList() {personnelData().then((res) => {this.tableData = res.data;this.loading = false;});},// 訪客排行g(shù)etVisitList() {visitorData().then((res) => {this.tableData1 = res.data;this.loading = false;});},//獲取公司列表getCompanyList() {getJson().then((res) => {this.departs = res.data.company_list;this.companylist = res.data.company_list;});},//通過(guò)公司編號(hào)獲取數(shù)據(jù)getcompany(val) {if (val) {this.queryParams.company_no = val;this.getPieData();}},getcompany2(val) {if (val) {this.queryParams2.company_no = val;this.getOrderDate();}},// 獲取預(yù)約統(tǒng)計(jì)圖的數(shù)據(jù)getOrderDate() {lineData(this.queryParams2).then((res) => {this.headData = res.data.legend_data;this.xdata = res.data.xData;this.y1 = res.data.data[0];this.y2 = res.data.data[1];this.y3 = res.data.data[2];this.y4 = res.data.data[3];});},//刷新refresh() {this.datatime = [];this.company_no = undefined;this.queryParams = {start_date: undefined,end_date: undefined,company_no: undefined,};this.getPieData();},// 預(yù)約折線圖刷新refresh2() {this.datatime2 = [];this.company_no2 = undefined;this.queryParams2 = {start_date: undefined,end_date: undefined,company_no: undefined,};this.getOrderDate();},getTime() {},},
};
</script> 
<style lang="scss" scoped>
.gaid-title {padding: 0px 15px 15px 15px;.grid-content {background: #ffff;.title_hh {border: 1px solid transparent;text-align: center;height: 50px;}}
}.red {color: rgb(209, 78, 78);
}
.green {color: #009e47;background-color: transparent;
}
.plue {color: #0064a8;
}
.font {padding: 10px 0px;font-size: 18px;font-weight: bold;display: inline-block;
}
.fontmini {padding: 10px 0px;font-size: 18px;display: inline-block;
}.centerrigin {text-align: center;display: flex;justify-content: center;
}
</style>

解決方案三

待更新…