element 如何渲染star评分

效果图

html数据绑定位置

<el-table-column
		label="分数"
		width="120">
  <template slot-scope="{row}">
    <i :style="item.color"  v-for="(item,index) in setStar(row.evalStar)" :key="index" :class="item.value"></i>
  </template>
 </el-table-column>

表格数据
评分为 evalStar

DataList:[
          {
            id:1,
            teacher:'张毅',
            tel:1544547416,
            evalPerson:'王大锤',
            evalStar:4,
            evalText:[
              '技术一般',
              '脾气差',
            ],
            content:'一般般！',
            show:false,
            evalTime:'2019-06-30 11:20'
          },
          {
            id:1,
            teacher:'张毅',
            tel:1544547416,
            evalPerson:'王大锤',
            evalStar:3,
            evalText:[
              '技术一般',
              '脾气差',
            ],
            content:'一般般！',
            show:false,
            evalTime:'2019-06-30 11:20'
          },
          {
            id:1,
            teacher:'张毅',
            tel:1544547416,
            evalPerson:'王大锤',
            evalStar:1,
            evalText:[
              '技术一般',
              '脾气差',
            ],
            content:'一般般！',
            show:false,
            evalTime:'2019-06-30 11:20'
          },
          {
            id:1,
            teacher:'张毅',
            tel:1544547416,
            evalPerson:'王大锤',
            evalStar:"5",
            evalText:[
              '技术一般',
              '脾气差',
            ],
            content:'一般般！',
            show:false,
            evalTime:'2019-06-30 11:20'
          },
        ],

评分字段处理JS

setStar(data){
            var arr=[];
            if(data == 0){
              for(var i=1;i<6;i++) {
                arr.push({
                  index:i,
                  value:'el-icon-star-off',
                });
                if(i+1 == data) return arr;
              }
            }else {
              for(var i=1;i<6;i++) {
                if(i > data) {
                  arr.push({
                    index:i,
                    value:'el-icon-star-off',
                    color:'color:rgba(0,0,0,0.15)',
                  });
                }else {
                  arr.push({
                    index:i,
                    value:'el-icon-star-on',
                    color:'color:rgb(247, 186, 42)',
                  });
                }
                if(i+1 == 6) return arr;
              }
            }
        }