layui中 {field: 'status', title: '状态', align: "center", width: 180},启用显示绿色禁用红色
时间: 2024-03-23 13:42:44 浏览: 124
您可以在 layui 表格中使用自定义列模板,来为状态列自定义颜色和文本。具体步骤如下:
1. 在列配置中,使用自定义列模板,同时为模板中的数据项添加一个自定义属性,用于表示状态的值。例如:
```javascript
{field: 'status', title: '状态', align: 'center', width: 180, templet: function(d) {
var color = d.status === '启用' ? 'green' : 'red';
return '<span class="layui-badge layui-bg-' + color + '">' + d.status + '</span>';
}}
```
在上述代码中,我们使用 `templet` 属性指定了一个自定义列模板,模板中的数据对象 `d` 表示当前行的数据。我们根据 `d.status` 的值来决定状态文本的颜色和具体文本内容,并使用 `span` 元素来渲染出一个带有相应颜色和文本的标签。
2. 在 CSS 中定义绿色和红色的样式类。例如:
```css
.layui-bg-green {
background-color: #5FB878;
color: #fff;
}
.layui-bg-red {
background-color: #FF5722;
color: #fff;
}
```
在上述代码中,我们分别定义了 `.layui-bg-green` 和 `.layui-bg-red` 两个样式类,用于表示绿色和红色的背景颜色和文本颜色。
3. 对于 `status` 列的数据,将启用状态的值设置为 `'启用'`,禁用状态的值设置为 `'禁用'`。例如:
```javascript
var data = [
{name: '项目1', status: '启用'},
{name: '项目2', status: '禁用'},
{name: '项目3', status: '启用'}
];
```
在上述代码中,我们将第二个项目的状态设置为了禁用。
最终渲染出的表格中,启用状态的文本将会显示为绿色,禁用状态的文本将会显示为红色。同时,状态文本周围还会有一个带有相应颜色的小圆圈,用于更加直观地表示状态。
阅读全文