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

需求：

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

环境：

vue3+element ui
element ui 表格

效果图：

image.png

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

代码：

<el-table
          :data="tableData"
          height="550"
          border
          show-summary   //底部自动合计总数方法
          style="width: 100%">
          <el-table-column
            prop="Date"
            label="日期">
            <template slot-scope="scope">{{ formatDate(scope.row.Date,"yyyy-MM-dd") }}</template>
          </el-table-column>
          <el-table-column
            prop="OrderCount"
            label="预约人数">
           </el-table-column>
           <el-table-column
            prop="TijianCount"
            label="实际到检人数">
            </el-table-column>
            <el-table-column
              prop="checkedRate"
              label="到检率(%)">
              <template slot-scope="scope">
             // 当预约人数和实际到检人数都为0时，那么就直接赋值结果为0
               <span v-if="scope.row.TijianCount === 0 || scope.row.OrderCount === 0">0%</span>
            // 否则就用实际到检人数 除以 预约人数，然后算出结果 * 100，并过滤为保留2位小数
               <span v-else>{{ (scope.row.TijianCount / scope.row.OrderCount ) * 100 | percent }} %</span>
              </template>
            </el-table-column>
  </el-table>

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

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

<template slot-scope="scope">
   // 当前面的条件语名成立时，执行结果1，否则执行结果2
   <span >{{ (scope.row.TijianCount === 0 || scope.row.OrderCount === 0 ? 0 : (scope.row.TijianCount / scope.row.OrderCount) * 100 | percent ) }} %</span>                
 </template>

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

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

• A展示方法

<template slot-scope="scope">
    // checked 就是在方法里新定义的字段
   <span >{{scope.row.checked}} %</span>
</template>

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展示方法

<template slot-scope="scope">
    // checked 就是在方法里新定义的字段
   <span >{{(scope.row.checked) * 100 | percent}} %</span> 
</template>

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);
              }
            }
      }    
}