我正在嘗試設定b-table不同顏色的行。bootstrap-vue 有一個類tbody-tr-class。
<b-table
head-variant="light"
:tbody-tr-
:items="Clients"
:fields="headers"
>
現在，該類回傳一些用十六進制顏色代碼分配的自定義顏色。
rowClass(item, type) {
if (!item || type !== "row") return;
if (item.color_id === 1) return "table-hexvalue1";
else return "table-hexvalue2";
},
我已經嘗試分配這樣的類：
<style lang="scss" scoped>
.hexvalue1 {
background-color: #D9FFBC;
color: #D9FFBC;
}
.hexvalue2 {
background-color: #fd7e14;
color: #fd7e14;
}
</style>
它不作業！如何將十六進制顏色代碼設定為tbody-tr-class？
uj5u.com熱心網友回復：
為您的班級名稱留出間距，例如
rowClass(item, type) {
if (!item || type !== "row") return;
if (item.color_id === 1) return "table hexvalue1";
else return "table hexvalue2";
},
因為您只為.hexvalue1和指定了樣式.hexvalue2
uj5u.com熱心網友回復：
我認為使用計算屬性
computed: {
rowClass(item, type) {
if (!item || type !== "row") {
return "";
}
if (item.color_id === 1) {
return "table-hexvalue1";
} else {
return "table-hexvalue2";
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359618.html