vue项目一个页面包含多个时间选择器的处理方案

描述：vue项目中如果在一个页面使用多个时间选择器组件时，不同的时间选择器需要分别分开工作

解决方案一

原本是想直接每一个时间选择器都安排一套相对独立的维生系统，但是到后面发现繁琐至极，而且报错，果断放弃！！！

解决方案二

利用vue框架自带的：watch 监听属性配合change绑定事件就可以解决这个问题。(代码仅做参考)

<template><div style="margin-top: 15px"><!-- 第一行：一个饼状图+两个表格，饼图放中间 --><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="部门" prop="depart" /><el-table-column label="姓名" prop="employee_name" /><el-table-column label="预约数" prop="reserve_count" /><el-table-column label="来访数" prop="visitor_count" /><el-table-column label="总数" prop="total" /></el-table></div></div></el-col><el-col :span="9"><div class="grid-content"><div class="title_hh"><h4>预约环形图</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><!-- 在这里绑定了多个change事件，希望顺次执行 --><!-- 思路：利用监听属性来获取时间的数据变化，然后把最新的值赋值到对应数据上去，最后按条件重新获取数据，妙呀！！！ --><el-date-pickerstyle="margin-left: 8px"size="mini"v-model="datatime"type="daterange"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"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="部门" prop="depart" /> --><el-table-column label="姓名" prop="visitor_name" /><el-table-column label="预约数" prop="reserve_count" /><el-table-column label="来访数" prop="visitor_count" /><el-table-column label="总数" prop="total" /></el-table></div></div></el-col></el-row><!-- 第二行：两个折线图 --><div class="bottom"><el-row :gutter="20" class="gaid-title"><el-col :span="12"><div class="grid-content"><div class="title_hh"><h4>预约折线图</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="时间查询"><el-date-pickerv-model="datatime2"type="daterange"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"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>部门统计图</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";
// 预约统计图
import lineChart from "../../components/visitTu/linechart.vue";
import { lineData } from "@/api/commpy/chart";
export default {components: { annUlar, lineChart },data() {return {loading: true,// 员工排行表格数据tableData: [],// 访客排行表格数据tableData1: [],// 饼图数据departs: [],ring1: [],ring2: [],legendData: [],company_no: "",datatime: [],queryParams: {start_date: undefined,end_date: undefined,},// 预约折线图数据companylist: [],company_no2: undefined,datatime2: [],xdata: [],y1: [],y2: [],y3: [],y4: [],headData: [],queryParams2: {company_no: "",start_date: undefined,end_date: undefined,},// 时间查询转换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: "最近一个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit("pick", [start, end]);},},{text: "最近三个月",onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit("pick", [start, end]);},},{text: "最近六个月",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() {// 获取双环图数据this.getPieData();this.getEmpeeList();this.getVisitList();this.getCompanyList();this.getOrderDate();},// 直接通过这个监听时间数据的变化，然后把新数据赋值上去，最后再已经获取到新数据的情况下请求新的数据，秒呀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: {// 获取饼图数据getPieData() {ringData(this.queryParams).then((res) => {this.ring1 = res.data.data[0];this.ring2 = res.data.data[1];this.legendData = res.data.legend_data;});},// 员工排行getEmpeeList() {personnelData().then((res) => {this.tableData = res.data;this.loading = false;});},// 访客排行getVisitList() {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;});},//通过公司编号获取数据getcompany(val) {if (val) {this.queryParams.company_no = val;this.getPieData();}},getcompany2(val) {if (val) {this.queryParams2.company_no = val;this.getOrderDate();}},// 获取预约统计图的数据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();},// 预约折线图刷新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>

解决方案三

待更新…