vue element ui 表格 后端返回数据处理

需求：

后台没有返回实时的到检率，根据后台返回的数据自己再求出到检率百分比。
注：因为只是实现方法不一样，所以重复代码省略掉了

环境：

vue3+element ui
element ui 表格

效果图：

image.png

第一种方法：(v-if判断)

代码：

methods:{
  // 到检率保留2位小数
  filters: {
    percent(value) {
      return value.toFixed(2);
    }
  },
}

第二种方法：(三木运算符)

第三种方法：(模仿后台返回字段(自己新定义字段))

此方法在template中有两种展示方法

• A展示方法

data: {
  tableData: []，
  percent: ' '
},
methods:{
  arriveAllClick() {
      const param = {}  //传给后台的参数
      apiDailyStatistics((param))
      .then((res) => {
         if (res.data.Code === 200) {
            this.tableData = res.data.Result.Data;
            // 判断到检率
             for (let k = 0; k < this.tableData.length; k++) {
              if (this.tableData[k].TijianCount === 0 || this.tableData[k].OrderCount === 0) {
                this.tableData[k].checked = 0;
              } else {
                // percent是过滤函数，我这里加了this，是因为报错没有定义，所以有才在data中定义的
                // 如果说你们在实现的过程中，没有提示这个报错，那么就不需要定义添加
               this.tableData[k].checked = (this.tableData[k].TijianCount / this.tableData[k].OrderCount) * 100 | this.percent;
              }
            }
      }    
  }

• B展示方法

methods:{
  arriveAllClick() {
      const param = {}  //传给后台的参数
      apiDailyStatistics((param))
      .then((res) => {
          if (res.data.Code === 200) {
            this.tableData = res.data.Result.Data;
            // 判断到检率
            for (let k = 0; k < this.tableData.length; k++) {
              if (this.tableData[k].TijianCount === 0 || this.tableData[k].OrderCount === 0) {
                this.tableData[k].checked = 0;
              } else {
                // 这里把过滤方法拿出来在template里展示了
                this.tableData[k].checked = (this.tableData[k].TijianCount / this.tableData[k].OrderCount);
              }
            }
      }    
}