elementUI中进度条的动态计算数组中的数据

7,034 阅读1分钟

需要实现上图的效果于是使用了elementUI的progress进度条

data: [
        {
          type: "1",
          name: "王小虎",
          info: "工商管理第一次测试",
          startTime: "07月09日 09:14",
          endTime: "07月10日 09:14",
          hand: "1",
          all: "50",
          id: "82820181"
        },
        {
          type: "2",
          name: "王小虎",
          info: "电子技术工程第一次测试",
          startTime: "07月09日 09:14",
          endTime: "07月10日 09:14",
          hand: "48",
          all: "65",
          id: "82830181"
        },
        {
          type: "1",
          name: "王小虎",
          info: "工程信息第一次测试",
          startTime: "07月09日 09:14",
          endTime: "07月10日 09:14",
          hand: "25",
          all: "32",
          id: "82820181"
        },
        {
          type: "2",
          name: "王小虎",
          info: "工程信息第一次测试",
          startTime: "07月09日 09:14",
          endTime: "07月10日 09:14",
          hand: "20",
          all: "44",
          id: "82881181"
        }
      ],

这个是我模拟的数据

<el-table-column label="交卷数" show-overflow-tooltip>
    <template slot-scope="scope">
      <p>
        交卷数:
        <span>{{scope.row.hand}}</span>/
        <span>{{scope.row.all}}</span>
      </p>
      <el-progress :percentage="Math.ceil(scope.row.hand/scope.row.all*100)"></el-progress>
    </template>
  </el-table-column>

在这个案例中,直接在行内进行计算,发现可以实现效果

<el-progress :percentage="scope.row.hand/scope.row.all*100"></el-progress>

如果不加Math.cell()就不能向上取整, 我对computed的使用还不太熟练,如果有更好更严谨的方法也可以在下方留言,谢谢指教!