bootstrap table 行内文本样式绑定利用cellstyle属性

新手小白的我在前几天利用bootstrap table写表格样式的时候，有个需求当表格内容为“正常”时，要显示绿色文本，当“离线”时文本颜色显示为红色，具体想达到的效果如下。

参照bootstrap的API,如下

(13条消息) Bootstrap Table API 中文版（完整翻译文档）_S_clifftop的博客-CSDN博客_bootstraptable

首先因为是列column内的数据样式改变

找到api中column的属性有什么，找到cellStyle

发现cellStyle的格式，查看参数在前端返回的值是什么，做判断，在cluomn属性中加入如下属性代码

cellStyle(value, rowData, rowIndex) {
var front_color;
if (value == "1") {//value根据前端返回的数据和自己定义的对应正常的id值
front_color = 'green';
}
else {
front_color = 'red';
}

return {
css: {

"color": front_color,
"font-weight": 'bold'

}
}

}

就可以出现如下效果啦~~

说到最后的体验就是有问题直接找API ，准确又容易理解，希望可以给像我一样的初学者一些思路~~

bootstrap table 行内文本样式绑定利用cellstyle属性相关推荐

Bootstrap3 行内文本样式
行内文本行内文本主要包括打标记的文本.被删除的文本.不再准确的文本.插入的文本.带下划线的文本.小号文本.粗体文本.斜体文本,Bootstrap 会为这些文本添加特殊的样式. 1．打标记的文本 HT ...
行内块样式_现代块引用样式
行内块样式 View demo 查看演示Download Source 下载源 Today we are going to create some fancy block quote styles. ...
Typora主题代码更改(引用块颜色, 标题样式和颜色, 行内代码样式)
Typora主题库中的主题总有自己不喜欢的部分所以自己在github主题的基础上做了一些更改打开主题文件夹首先需要找到需要更改的文件的位置文件→偏好设置→外观→主题→打开主题文件夹给gith ...
Thymeleaf实现行内背景样式，补充行内样式属性
1.当背景图样式处于行内时,此时我们又需要使用Thymeleaf获取后台图片数据时可使用如下代码 <section class="section-top" th:each=& ...
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
Bootstrap table 行编辑导航
/*开启表格编辑方向键导航方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录一.Vue样式绑定 1.1 Vue绑定class样式 1.2 Vue绑定行内样式 1.2.1 对象控制绑定样式 1.2.2 数组控制绑定样式 1.3 Vue绑定样式案例(标题排他) 1.4 ...
Bootstrap 源代码之行内代码
源代码是指计算机程序的源码,或其他机器可以阅读的文本,如计算机程序.或函数名.XML元素名.或文件名等. Bootstrap中,有两种方式显示源代码,一种是使用 <code> 标签包裹行内 ...

bootstrap table 行内文本样式绑定利用cellstyle属性

bootstrap table 行内文本样式绑定利用cellstyle属性相关推荐

最新文章

热门文章