Vue项目中在el-table插入进度功能

我们在项目中有时候会有各种各样的要求，今天我碰到的要求就是需要在el-table中插入类似于进度条，并且获取每一列的最大值，根据最大值，来渲染进度

我们先来看一下效果图：

我们首先在template模板中将表格中的内容渲染出来

 <el-table-column
    v-for="(item, gaindex) in gadgetcolum"
    :key="gaindex + 1"
    :prop="item.prop"
    :label="item.label"
  >
 </el-table-column>

表格的内容就很简单，通过v-for指令来进行循环遍历，来进行渲染

然后表格里面的内容我们需要插入一个template模板来实现

 <el-table-column
          v-for="(item, gaindex) in gadgetcolum"
          :key="gaindex + 1"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
  
            <div
              style="
                width: 131px;
                height: 20px;
                border-radius: 100px;
                background-color: #eeeeee;
              "
            >
              <div
                :style="{
                  backgroundColor: '#56c08d',
                  width: `calc(( 100% / ${maxValues[gaindex]} ) * ${
                    scope.row[item.prop]
                  })`,
                  height: '20px',
                  borderRadius: '100px',
                  zIndex: 999,
                }"
              >
                <span
                  style="
                    color: rgba(255, 255, 255, 0.9);
                    font-size: 12px;
                    line-height: 20px;
                    float: right;
                    margin-right: 5px;
                  "
                  >{{ scope.row[item.prop] }}</span
                >
              </div>

里面需要两个div来进行布局，具体样式如上

获取每一列的最大值，在一块我们需要用到computed计算属性来进行计算

computed: {
    maxValues() {
      const maxValues = [];
      this.gadgetcolum.forEach((item) => {
        const columnValues = this.gadgetTableData.map((row) => row[item.prop]);
        const max = Math.max(...columnValues);
        maxValues.push(max);
      });
      return maxValues;
  },

在计算属性里面，我们创建一个空的数组，将计算的值放进数组中，通过 css函数 calc来进行计算

width: `calc(( 100% / ${maxValues[gaindex]} ) * ${scope.row[item.prop]})`,

100% -- 最大像素基数

maxValues[gaindex] -- 每一列的最大基数，通过索引来查找

scope.roe[item.prop] -- 每一列的数据

这样效果就实现了