element ui表格内容替换为图形，以图形展示出来

效果图：

核心代码

：formatter='one’
formatter这个方法在官方文档中有介绍，我就不过多介绍了
这里一第一列为例：
html

  <el-table-column prop="yi" align="center" label="1" width="35" :formatter="one"></el-table-column>

js

row.yi就是第一列的prop对应的数组里面的值

    //数字转换为图形显示
    one(row, column) {
      return row.yi == 1 ? 
      <div style="background: #22BEE6;width: 20px;height: 20px;border-radius: 50%;display: block;"></div>
      : 
      <div style="background: #000;width: 20px;height: 20px;border-radius: 50%;display: block;"></div>;
    },

没了，结束了，是不是很简单O(∩_∩)O
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~