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