element ui rate评分组建使用

评分组件在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