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

175 阅读1分钟

效果图:在这里插入图片描述

核心代码

: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
最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~