评分组件在el-table展示时的使用

大于0分时展示，为0时显示无评分

                  <el-table-column label="评分" prop="score" width="200">
                    <template slot-scope="{row}">
                      <el-rate v-if="row.score > 0"
                        v-model="row.score"
                        disabled
                        show-score
                        text-color="#101010"
                        score-template="{ value }分"
                        :colors="scoreColors"
                      >
                      </el-rate>
                      <el-rate v-else
                        v-model="row.score"
                        disabled
                        show-score
                        text-color="#101010"
                        score-template="无评分"
                        :colors="scoreColors"
                      >
                      </el-rate>
                    </template>
                  </el-table-column>

// data中的scoreColors 颜色对应评分12  3  45
scoreColors: [\'#99A9BF\', \'#F7BA2A\', \'#FF9900\'],  // 等同于 { 2: \'#99A9BF\', 4: { value: \'#F7BA2A\', excluded: true }

 

效果如下：

 

 

 

参考:

官网：https://element.eleme.cn/#/zh-CN/component/rate#rate-ping-fen

element rate源码：https://www.cnblogs.com/wsk1576025821/p/10979326.html

 

版权声明：本文为ycc1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ycc1/p/13850841.html