工作中遇到的问题（1）操作ant-design-table的customRender

设置行属性

样式效果图片

需求分析： 需要根据右边百分比的范围确定显示什么颜色的图片

<a-table
            size="middle"
            rowKey="type"
            :columns="columns"
            :dataSource="regionData"
            :defaultExpandAllRows="true"
            :customRow="checkRow"  //设置行属性，给行属性上绑定一个函数方法
            :indentSize="8">
</a-table>

此任务需要熟练掌握ant-design-vue中的customRender函数的应用。customRender函数是高级的可自定义列的函数具体代码如下所示：

     {
          // title:'小图标',
          align: 'left',
          customRender:(record)=>{ return this.filterimage(record.showImage)}
     }

// 计算比例
    getPercent(arr) {
      console.log("arr", arr)
      arr.forEach(item => {
        if (!item.children) {
          if (!isNaN(+item.area) && !Number.isInteger(item.area)) {
            item.percent = ((item.area / this.prjArea) * 100).toFixed(2);
            if (item.percent > 1 && item.percent <= 10) {
              item.showImage = 1 //百分比图片显隐
            }else if(item.percent > 10 && item.percent <= 30){
              item.showImage = 2 //百分比图片显隐
            }else if(item.percent > 30){
              item.showImage = 3 //百分比图片显隐
            }
          } else {
            item.percent = null
          }
        } else {
          this.getPercent(item.children)
        }
      })
    },
    //根据百分比确定图标展示
    filterimage(code){
      let imageControl = ""
      switch(code) {
        case 1:
        imageControl = <div style="width:20px;height:20px; background:blue;border-radius:50%;"></div>;
        break;
        case 2:
        imageControl = <div style="width:20px;height:20px; background:yellow;border-radius:50%;"></div>;
        break;
        case 3:
        imageControl = <div style="width:20px;height:20px; background:red;border-radius:50%;"></div>;
        break;
      }
      // console.log("imageControlimageControlimageControlimageControl", imageControl)
      return imageControl;
    },