評分組件在el-table展示時的使用
大于0分時展示,為0時顯示無評分
<el-table-column label="評分" prop="score" width="180">
<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
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/183618.html
標籤:JavaScript
