<el-progress>进度条之显示自定义文本

进度条-显示自定义文本

<el-progress :text-inside="true" :stroke-width="16" 
:color="''#FF5A5A''" 
:stroke-linecap="'square'"
:percentage="item.proportion" 
:format="formatProgress(item)" 
:text-color="progressTextColor" 
class="w100 ml10"></el-progress>


<script>
export default {
  name: "",
  data() {
    return {
      item: {
        proportion: 70,
        value: 2148,
        title: '销售量'
      }
    }
  },
  methods: {
    formatProgress(item) {
      return () => { return `${item.value}`};
    },
    // 计算百分比
    calculateRatio(num, sum) {
      if (!sum|| !num) {
        return 0;
      }
      let result = (Math.round(num / sum * 10000) / 100);
      return result > 100 ? 100 : result;
    },
  }
}  



</script>

合并请求

axios.all([
    this.getLoginUserInfo(),
    this.updatePersonInfo(paramsList, item),
    this.handleSendEmail(item.name, this.selectionRows)
]).catch(err => {this.catchError(err)});

getLoginUserInfo() {
  axiox.get(url, params).then(res => {
    // do something
  })
},
updatePersonInfo(paramsList, item) {
  axiox.post(url, params).then(res => {
    // do something
  })
},
handleSendEmail(item, list) {
  axiox.post(url, params).then(res => {
    // do something
  })
},

逐个请求，后者依赖前者接口参数

new Promise((resolve, reject) => {
	return this.getLoginUserInfo(resolve);
}).then((res,rej) => {
	return this.updatePersonInfo(paramsList, item, res);
}).then((updateResult) => {
	return this.handleSendEmail(item.name, this.selectionRows);
});

getLoginUserInfo(resolve) {
  return axiox.get(url, params).then(res => {
    // do something
    resolve && resolve();
  })
},
updatePersonInfo(paramsList, item, resolve) {
  return axiox.post(url, params).then(res => {
    // do something
    resolve && resolve();
  })
},
handleSendEmail(item, list) {
  axiox.post(url, params).then(res => {
    // do something
  })
},

日期选择器

<el-date-picker
v-model="chartTime"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 300px;"
:picker-options="timePickerOptions"
class="mr10">
</el-date-picker>

export default {
  name: "",
 data() {
	return {
		timePickerOptions: {
                      onPick: ({maxDate, minDate}) => {
                        if (maxDate && minDate) {
                          this.minDate = minDate;
                          this.maxDate = maxDate;
                          let limitTime = 31 * 24 * 3600 * 1000;
                          if (minDate && maxDate && (new Date(maxDate).getTime() < limitTime)) {
                          } else {
                            this.$message.warning('最多支持31天内的查询，请重新选择时间范围！')
                            return;
                          }
                      }
                    },
                    disabledDate: (time) => {}
             },
	}
  },
  methods: {
  }
}