vue项目 数据更新异步问题处理
<el-dropdown trigger="click" :hide-on-click="false" @command="handleGroup" > <el-button type="default " :disabled="codeArray.length === 1"> 显示分组 <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, key) in columnList" :key="key"> <el-checkbox v-model="item.show">{{ item.name }}</el-checkbox> </el-dropdown-item> </el-dropdown-menu> </el-dropdown>
export default { data() { return { indicatorProps: { label: "name", value: "code" }, props: { label: "name", value: "code", emitPath: false, disabled: "disabled" }, indicatorSelectList: [{ property: [] }], indicatorOptions: [], indicatorFlatArray: [], indicatorName: "", userOptions: [], // 用户属性 指标 data userFlatArray: [], // 用户属性data拉平children codeArray: [], // 属性分析分组集合 codeNameArr: [], // [{name:"",code:""}] codeNameObj: {}, // {code:name} codeNameStr: "", // 属性分析分组名称集合 dropdownUserType: "", // 属性值下拉选中值 memberForm: { indicator: "" }, columnList: [], // 显示分组数组 chartType: "1", // 图标类型 1：线图 2：柱图 3：饼图 chartTypeList: [ { id: "1", name: "线图", icon: "line" }, { id: "2", name: "柱图", icon: "chart" }, { id: "3", name: "饼图", icon: "pie" } ], barChart: {}, popover: false, legendData: ["82~84", "邮件营销", "联盟广告", "视频广告"], xDataArray: ["白银", "青铜", "黄金"], series: [ { name: "直接访问", type: "bar", stack: "barchart", barWidth: 30, data: [320, 332, 301, 334, 390, 330, 320] }, { name: "邮件营销", type: "bar", barWidth: 30, stack: "barchart", data: [120, 132, 101, 134, 90, 230, 210] }, { name: "联盟广告", type: "bar", barWidth: 30, stack: "barchart", data: [220, 182, 191, 234, 290, 330, 310] } ], headers: [""], detailObj: {}, lineChart: {}, lineSeries: [], pieChart: {}, pieObj: {}, peiLegendData: [] }; }, created() { this.getEventIndicator(); this.getUserIndicator(); // this.getChartList() this.createFalseData(); }, methods: { createFalseData() { const rows = [ { values: [[339532.0], [340507.0], [351192.0], [1090.0]], by_values: ["北京", "女"] }, { values: [[337168.0], [345011.0], [334602.0], [854.0]], by_values: ["深圳", "女"] }, { values: [[339814.0], [342683.0], [348465.0], [851.0]], by_values: ["深圳", "男"] }, { values: [[324703.0], [330292.0], [342045.0], [849.0]], by_values: ["合肥", "女"] }, { values: [[330686.0], [337726.0], [343880.0], [848.0]], by_values: ["杭州", "男"] }, { values: [[344871.0], [332696.0], [337733.0], [828.0]], by_values: ["合肥", "男"] }, { values: [[334726.0], [339059.0], [328708.0], [812.0]], by_values: ["石家庄", "女"] }, { values: [[334403.0], [336552.0], [344020.0], [752.0]], by_values: ["上海", "女"] }, { values: [[339284.0], [339942.0], [336175.0], [657.0]], by_values: ["北京", "男"] }, { values: [[338436.0], [340759.0], [340111.0], [619.0]], by_values: ["杭州", "女"] }, { values: [[344290.0], [331236.0], [335737.0], [570.0]], by_values: ["上海", "男"] }, { values: [[339751.0], [339188.0], [341085.0], [570.0]], by_values: ["石家庄", "男"] }, { values: [[5637.0], [5987.0], [5936.0], [97.0]], by_values: ["上海", null] }, { values: [[6656.0], [5532.0], [6611.0], [93.0]], by_values: ["杭州", null] }, { values: [[5915.0], [6339.0], [4772.0], [85.0]], by_values: ["深圳", null] }, { values: [[6476.0], [6182.0], [4672.0], [0.0]], by_values: ["北京", null] }, { values: [[4821.0], [6108.0], [5614.0], [0.0]], by_values: ["合肥", null] }, { values: [[6073.0], [5155.0], [4580.0], [0.0]], by_values: ["石家庄", null] }, { values: [[0.0], [0.0], [0.0], [0.0]], by_values: [null, "男"] }, { values: [[0.0], [0.0], [0.0], [0.0]], by_values: [null, null] } ]; const series = ["白银", "青铜", "黄金", null]; rows.map(item => { const key = item.by_values.join(","); this.detailObj[key] = item.values.flat(); }); this.legendData = rows.map(item => item.by_values.join(",")); this.peiLegendData = rows.map(item => item.by_values.join(",")); this.xDataArray = series; // 组装饼图数据 const pieObj = {}; for (let i = 0; i < series.length; i++) { for (let j = 0; j < this.peiLegendData.length; j++) { const key = `${series[i]},${this.peiLegendData[j]}`; const value = this.detailObj[this.peiLegendData[j]][i]; pieObj[key] = value; } } this.pieObj = pieObj; // 显示分组 this.columnList = Object.keys(this.detailObj).map(item => { return { name: item, show: false }; }); for (let i = 0; i < 10; i++) { this.columnList[i].show = true; } console.log(this.columnList); this.initCharts(); }, async getChartList() { const res1 = await getTableInfo({ tagId: 20, pageSize: 10, pageNum: 1, nums: "", total: 0 }); if (res1.code === 0) { const result = res1.data; this.headers = result.headers; } const res = await getCustomerDis({ nums: "", tagId: 20 }); if (res.code === 0) { // 标签历史详情 this.detailObj = res.data.detail; this.legendData = Object.keys(res.data.detail); const xDataArray = [...this.headers]; xDataArray.shift(); this.xDataArray = xDataArray; const series = []; for (let i = 0; i < this.legendData.length; i++) { const obj = { name: this.legendData[i], type: "bar", barWidth: 30, stack: "barChart", data: this.detailObj[this.legendData[i]].nums }; series.push(obj); } const lineSeries = []; for (let i = 0; i < this.legendData.length; i++) { const obj = { name: this.legendData[i], type: "line", // stack: 'lineChart', symbol: "circle", // 设定为实心点 symbolSize: 2, // 设定实心点的大小 data: this.detailObj[this.legendData[i]].nums }; lineSeries.push(obj); } this.series = series; this.lineSeries = lineSeries; // 显示设置 this.columnList = Object.keys(res.data.detail).map(item => { return { name: item, show: true }; }); this.initCharts(); } }, // 上面假接口 indicatorChange() { const indicatorArr = this.memberForm.indicator; const indicatorFlatArray = this.indicatorFlatArray; let indicatorName = ""; for (let i = 0; i < indicatorArr.length; i++) { for (let j = 0; j < indicatorFlatArray.length; j++) { if (indicatorFlatArray[j].code === indicatorArr[i]) { if (!indicatorName) { indicatorName = indicatorFlatArray[j].name; } else { indicatorName = `${indicatorName}的${indicatorFlatArray[j].name}`; } } } } this.indicatorName = indicatorName; }, // userOption 初始disabled 为False userDisableFun() { const userOptions = this.userOptions; const _this = this; function userFn(userOption) { if (userOption.children) { for (let i = 0; i < userOption.children.length; i++) { _this.$set(userOption.children[i], "disabled", false); userFn(userOption.children[i]); } } } for (let i = 0; i < userOptions.length; i++) { this.$set(userOptions[i], "disabled", false); userFn(userOptions[i]); } }, setAbleFun() { const userOptions = this.userOptions; this.codeArray = this.indicatorSelectList.map(item => item.property); function userDisableFn(code, userOptions) { if (userOptions.children) { for (let n = 0; n < userOptions.children.length; n++) { userDisableFn(code, userOptions.children[n]); } } else if (code === userOptions.code) { userOptions.disabled = true; } } for (let i = 0; i < this.codeArray.length; i++) { for (let j = 0; j < userOptions.length; j++) { userDisableFn(this.codeArray[i], userOptions[j]); } } }, setCodeName() { const codeArr = this.indicatorSelectList.map(item => item.property); const codeNameArr = []; for (let i = 0; i < codeArr.length; i++) { let obj = { name: "", code: "" }; for (let j = 0; j < this.userFlatArray.length; j++) { if (codeArr[i] === this.userFlatArray[j].code) { obj = { code: this.userFlatArray[j].code, name: this.userFlatArray[j].name }; } } codeNameArr.push(obj); } this.codeNameArr = codeNameArr; this.codeNameObj = {}; codeNameArr.map(item => { this.codeNameObj[item.code] = item.name; }); this.codeNameStr = codeNameArr.map(item => item.name).join(","); }, async cascaderChange(item, index) { this.dropdownUserType = this.indicatorSelectList[0].property; this.userDisableFun(); this.setCodeName(); this.setAbleFun(); }, async getUserIndicator() { const res = await getIndicatorSelect({ indicatorGroupId: 1 }); if (res.code === 0) { const userArr = res.data; // 对用户标签及群组保留children,其他属性删除二级属性 const persist = ["user_tag_group_header", "user_group_header"]; for (let i = 0; i < userArr.length; i++) { if (userArr[i].children && !persist.includes(userArr[i].code)) { userArr[i].children = []; } } flatArrayFun(userArr, this.userFlatArray); delArrChildren(userArr); this.userOptions = userArr; } }, // 删除用户指标属性 removeUserIndicator(index) { this.indicatorSelectList.splice(index, 1); this.cascaderChange(); }, // 新增用户指标属性 addUserIndicator() { this.indicatorSelectList.push({ property: [] }); }, async getEventIndicator() { const result = await getBasicEventIndicator(); if (result.code === 0) { const indicatorArr = result.data.resultIndicatorTree; indicatorArr.unshift({ name: "用户数", code: "userCount", dataType: "indicator", children: [] }); flatArrayFun(indicatorArr, this.indicatorFlatArray); delArrChildren(indicatorArr); this.indicatorOptions = indicatorArr; } }, // chart async initCharts() { await this.$nextTick(); this.barChart = echarts.init(document.getElementById("barChart")); this.lineChart = echarts.init(document.getElementById("lineChart")); this.pieChart = echarts.init(document.getElementById("pieChart")); switch (this.chartType) { case "1": this.setLineOption(); break; case "2": this.setBarOption(); break; default: this.setPieOption(); break; } }, setBarLineParams() { // this.legendData = this.columnList // .filter(item => item.show) // .map(item => item.name); const legendData = []; console.log(JSON.stringify(this.columnList), "this.columnList"); console.log(this.columnList[0].show, "this.columnList"); for (let i = 0; i < this.columnList.length; i++) { if (this.columnList[i].show === true) { legendData.push(this.columnList[i].name); } } console.log(legendData); this.legendData = legendData; const barSeries = []; const lineSeries = []; for (let i = 0; i < this.legendData.length; i++) { const obj = { name: this.legendData[i], type: "bar", barMaxWidth: 80, stack: "barChart", data: this.detailObj[this.legendData[i]] }; const lineObj = { name: this.legendData[i], type: "line", // stack: 'lineChart', symbol: "circle", // 设定为实心点 symbolSize: 8, // 设定实心点的大小 data: this.detailObj[this.legendData[i]] }; barSeries.push(obj); lineSeries.push(lineObj); } this.barSeries = barSeries; this.lineSeries = lineSeries; // console.log(this.lineSeries); }, setPieParams() { this.pieData = this.columnList .filter(item => item.show) .map(item => { return { name: item.name, value: item.value }; }); }, setBarOption() { this.setBarLineParams(); this.barChart.setOption( { tooltip: { trigger: "item", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow" // 默认为直线，可选为：'line' | 'shadow' }, formatter: function(params) { var res = `${params.name}<br/>`; res += `${params.seriesName} : ${params.value}`; return res; } }, grid: { left: "3%", right: "4%", bottom: "15%", containLabel: true }, legend: { data: this.legendData, orient: "horizontal", // 'vertical' x: "center", // 'center' | 'left' | {number}, y: "bottom" // 'center' | 'bottom' | {number} }, xAxis: [ { type: "category", data: this.xDataArray } ], yAxis: [ { type: "value", axisLabel: { formatter: value => { return value; } } } ], series: this.barSeries }, true ); }, setLineOption() { this.setBarLineParams(); this.lineChart.setOption( { tooltip: { trigger: "item", formatter: function(params) { var res = `${params.name}<br/>`; res += `${params.seriesName} : ${params.value}`; return res; } }, legend: { orient: "horizontal", // 'vertical' x: "center", // 'center' | 'left' | {number}, y: "bottom", // 'center' | 'bottom' | {number} data: this.legendData }, xAxis: { type: "category", data: this.xDataArray }, yAxis: { type: "value" }, series: this.lineSeries }, true ); }, setPieOption() { this.setPieParams(); const indicatorName = this.indicatorName || "用户数"; this.pieChart.setOption( { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { name: indicatorName, type: "pie", radius: ["50%", "70%"], // avoidLabelOverlap: false, // label: { // show: false, // position: 'center' // }, emphasis: { label: { show: true, fontSize: "30", fontWeight: "bold" } }, labelLine: { show: true }, data: this.pieData } ] }, true ); }, // 显示分组 handleGroup() { // setTimeout(() => { switch (this.chartType) { case "1": this.setLineOption(); setTimeout(() => { this.lineChart.resize(); }); break; case "2": this.setBarOption(); setTimeout(() => { this.barChart.resize(); }); break; case "3": this.setPieOption(); setTimeout(() => { this.pieChart.resize(); }); break; } // }); console.log(this.chartType, "chartType"); }, handleChartType(command) { if (this.chartType === command) return; // 由柱图或者线图切换为饼图 if (this.chartType !== "3" && command === "3") { this.columnList = Object.keys(this.pieObj).map(key => { return { value: this.pieObj[key], name: key, show: false }; }); for (let i = 0; i < 10; i++) { this.columnList[i].show = true; } } // 由饼图切换为柱图或者线图 if (this.chartType === "3" && command !== "3") { this.columnList = Object.keys(this.detailObj).map(item => { return { name: item, show: false }; }); for (let i = 0; i < 10; i++) { this.columnList[i].show = true; } } this.chartType = command; switch (command) { case "1": this.setLineOption(); setTimeout(() => { this.lineChart.resize(); }); break; case "2": this.setBarOption(); setTimeout(() => { this.barChart.resize(); }); break; case "3": this.setPieOption(); setTimeout(() => { this.pieChart.resize(); }); break; } // this.initCharts() }, // 属性值下拉 handleUserOption(command) { this.dropdownUserType = command; } } };
图示中执行handleGroup方法时，el-checkbox状态其实有个延迟，所以打印出来是, 为了验证，用JSON.stringfy做了下处理，因为el-checkbox会有延迟，如果不做处理，打印出来的会动态变为false,通过处理，可以发现此时打印出来show的状态仍然是true,为了解决这个问题，把handleGroup用settimeOut包装成异步。
第二种方法就是使用computed
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <div> <el-dropdown trigger="click" :hide-on-click="false" <!-- @command='handleGroups' --> > <el-button type="default " > 显示分组 <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, key) in columnList" :key="key"> <el-checkbox v-model="item.show">{{ item.name }}</el-checkbox> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>选中的名称:{{selectName}}</span> </div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data(){ return{ columnList:[ { name:"男", show:false }, { name:"女", show:false }, { name:"未知", show:false }, ] } }, computed: { selectName() { this.handleGroups() return this.columnList.filter(item=>item.show).map(item=>item.name); } }, methods:{ // handleGroups(){ // console.log(JSON.stringify(this.columnList)) // } } }) </script> </html>
