Vue结合Element UI的el-table打造加工工序甘特图可视化解决方案

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="工序">
      <template slot-scope="scope">
        <div class="gantt-chart">
          <!-- 这里使用v-for渲染工序，并通过style控制宽度和颜色 -->
          <div class="gantt-bar"
               v-for="(proc, index) in scope.row.process"
               :key="index"
               :style="{ width: proc.width, background: proc.color }">
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          process: [
            { width: '20%', color: 'lightblue' },
            { width: '40%', color: 'orange' },
            { width: '60%', color: 'green' }
          ]
        },
        // ... 其他数据
      ]
    };
  }
};
</script>
 
<style>
.gantt-chart {
  display: flex;
  height: 20px;
}
.gantt-bar {
  height: 100%;
}
</style>

这个代码实例展示了如何在Vue结合Element UI的el-table中创建一个简单的加工工序甘特图。通过el-table-column的template插槽，我们可以自定义列的内容，并使用v-for来渲染每个工序的进度条。每个进度条通过style绑定宽度和颜色，以此表示不同的工序进度状态。