更新：這是我的代碼的
我有一個包含這些列的引導表：name、expDate、stoplight。stoplight 列中的值基于 expDate 列中的日期。如果 expDate 在今天的 7 天內為紅色，在 7 到 21 天之間為黃色，否則為綠色，請參見下面的邏輯。如果我只想顯示紅色、黃色、綠色這幾個字，它就可以正常作業。我被卡住的部分是我想在列中顯示一個“紅綠燈”，一個紅色或黃色或綠色的圓圈/按鈕。我有一個可用的 css，但我不知道如何將自定義格式應用于特定的單元格。任何幫助表示贊賞。
<BootstrapTable
keyField="street"
columns={columns}
data={rows}
hover
rowEvents={tableRowEvents}
bordered={true}
rowStyle={rowStyle}
/>
const Stoplight = (daysToExpDate) => {
if (daysToExpDate <= 7) {
return "Red";
} else if (daysToExpDate > 30) {
return "Green";
} else {
return "Yellow";
}
};
這是我的基本 css，它可以單獨作業，但不在表格中。
.redlight {
border-radius: 50%;
color: red;
background-color: red;
}
.greenlight {
border-radius: 50%;
color: green;
background-color: green;
}
.yellowlight {
border-radius: 50%;
color: yellow;
background-color: yellow;
}
此行樣式突出顯示整行，而不僅僅是相關單元格。
const rowStyle = (row, rowIndex) => {
const style = {};
if (row.stoplight === "Red") {
style.backgroundColor = "Red";
} else if (row.stoplight === "Green") {
style.backgroundColor = "Green";
} else {
style.backgroundColor = "Yellow";
}
if (rowIndex > 2) {
style.fontWeight = "normal";
style.color = "black";
}
return style;
};
uj5u.com熱心網友回復：
您可以將div元素作為資料傳遞
const data = [{
name: "884 Restbrook Ave",
expDate: "2022-06-01",
light: <div className = "circle green"> </div>
},
{
name: "2587 Wellons Ave",
expDate: "2023-04-24",
light: <div className = "circle yellow"> </div>
},
{
name: "3948 Boulevard Pl",
expDate: "2022-03-26",
light: <div className = "circle red"> </div>
}
];
并為此應用一個不錯的 css
.circle {
width: 15px;
height: 15px;
border-radius: 15px;
}
.green {
background: olivedrab;
}
.red {
background: maroon;
}
.yellow {
background: darkgoldenrod;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450524.html
標籤：javascript css 反应