首先看一下效果图,再做讲解
在el-table中插入某个标签,我们通常是采用插槽的方式进行插入,但是实现图片中的功能的时候,你会发现,步骤条插入就显示出来了,但是用echarts绘制的燃尽图却出不来。打开控制台,你会发现报错了。
现在我们来分析一下,报错的原因。因为我们用echart绘制图表的时候,第一行代码首先写的是
var myChart = echarts.init(document.getElementsByClassName("main")[0])
正式因为这行代码,导致了报错;表格的数据是循环遍历出来的,这个时候标签在渲染过程,我们还没拿到document.getElementsByClassName("main")[0]这个标签,所以就报错了。
这时候我们在调用echarts生成图片的方法的时候,需要加一个定时器。
setTimeout(()=>{ this.echarImg() })
这个时候你会发现,图片出来了,但是只有第一列有图片。那是因为我们遍历来绘制图片。
echarImg(){ for(var i = 0; i< this.tableData.length;i++){ var myChart = echarts.init(document.getElementsByClassName("main")[i]) var option = { ... } myChart.setOption(option) } },
下面就是说说步骤条,一般在表格中只会展示部分的步骤,到详情界面才会全部展示,那么这时候怎么处理呢?
通过v-show="key+1==scope.row.milepostRow.milepostActive || key+1 == scope.row.milepostRow.milepostActive-1 || key+1==scope.row.milepostRow.milepostActive+1"来显示需要显示的步骤,v-if="key<scope.row.milepostRow.milepostActive+1"去掉elementUI中多带出来的线条,然后样式微调整即可
<el-table-column prop="milepostRow" align="center" label="步骤条"> <template slot-scope="scope"> <div :style="scope.row.milepostRow.milepostActive == 1 || scope.row.milepostRow.milepostActive == 2 ? Style: Style1"> <el-steps :active="scope.row.milepostRow.milepostActive" > <el-step v-for="(value, key) in scope.row.milepostRow.milepost" v-if="key<scope.row.milepostRow.milepostActive+1" v-show="key+1==scope.row.milepostRow.milepostActive || key+1 == scope.row.milepostRow.milepostActive-1 || key+1==scope.row.milepostRow.milepostActive+1" :class="scope.row.milepostRow.milepostActive== key+1 ? scope.row.milepostRow.stepActive: '' " :title="value.title" > </el-step> </el-steps> </div> </template> </el-table-column>
最后附上全部代码
<template> <div> <el-table border :data="tableData" style="width: 100%"> <el-table-column align="center" prop="date" label="日期" width="180"> </el-table-column> <el-table-column align="center" prop="name" label="姓名" width="180"> </el-table-column> <el-table-column align="center" label="燃尽图"> <template slot-scope="scope"> <div class="main" style="width: 300px;height:80px; left:10%"></div> </template> </el-table-column> <el-table-column prop="milepostRow" align="center" label="步骤条"> <template slot-scope="scope"> <div :style="scope.row.milepostRow.milepostActive == 1 || scope.row.milepostRow.milepostActive == 2 ? Style: Style1"> <el-steps :active="scope.row.milepostRow.milepostActive" > <el-step v-for="(value, key) in scope.row.milepostRow.milepost" v-if="key<scope.row.milepostRow.milepostActive+1" v-show="key+1==scope.row.milepostRow.milepostActive || key+1 == scope.row.milepostRow.milepostActive-1 || key+1==scope.row.milepostRow.milepostActive+1" :class="scope.row.milepostRow.milepostActive== key+1 ? scope.row.milepostRow.stepActive: '' " :title="value.title" > </el-step> </el-steps> </div> </template> </el-table-column> </el-table> </div> </template> <script> import echarts from 'echarts' export default { name: "one", data() { return { tableData: [], Style: 'position: relative; left:10%; padding-right:20% ', Style1: 'position: relative; left:10%;' } }, mounted(){ this.getList() }, methods:{ getList(){ this.tableData = [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', list:['迭代一', '迭代二','迭代三'], rwl:[6,4,0], stack:[5, 4.5], milepostRow:{ milepost: [ {title: '迭代一' }, {title: '迭代二'}, {title: '迭代三'}, ], // 默认步骤数 milepostActive: 2, // 动态添加类名 stepActive: 'stepActive' } }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', list:['迭代一', '迭代二', '迭代三', '迭代四', '迭代五'], rwl:[6,4,2,0], stack:[5, 4.5, 2.8], milepostRow: { milepost: [ {title: '迭代一' }, {title: '迭代二'}, {title: '迭代三'}, {title: '迭代四'}, {title: '迭代五'} ], // 默认步骤数 milepostActive: 3, // 动态添加类名 stepActive: 'stepActive' }, } ] setTimeout(()=>{ this.echarImg() }) }, echarImg(){ for(var i = 0; i< this.tableData.length;i++){ var myChart = echarts.init(document.getElementsByClassName("main")[i]) var option = { xAxis: { type: 'category', boundaryGap: false, splitLine: { show: false }, data: this.tableData[i].list }, yAxis: { splitLine: { show: false }, type: 'value', splitNumber:3 }, series: [ { name: '剩余工作量', type: 'line', // stack: '剩余工作量', data: this.tableData[i].stack, itemStyle: { normal: { // 折点颜色样式 color: 'green', lineStyle: { // 折线颜色样式 color: 'green' } } }, }, { name: '任务量', type: 'line', data: this.tableData[i].rwl, itemStyle: { normal: { // 折点颜色样式 color: 'orange', lineStyle: { // 折线颜色样式 color: 'orange', type:'dashed' } } }, }, ] } myChart.setOption(option) } }, } } </script> <style lang="scss"> .el-step.is-horizontal.stepActive{ .el-step__head.is-finish{ .el-step__line{ // 当前步骤数横线样式设置 .el-step__line-inner{ width: 50% !important; border-width: 1px !important; } } // 当前步骤数圆圈样式设置 .el-step__icon.is-text{ background: #409eff; color:#fff; } } } .el-table td:last-child div { text-align: left; } </style>