el-table表格在表头和数据行添加图标、处理数据

通过header插槽自定义表头：

<template slot="header" slot-scope="scope">...
</template>

可以通过scope.row.columnName 获取单元项数据进行数据处理：

<template  slot-scope="scope"><span :class="1<2 ? 'red-font' : 'blue-font' ">{{formatDate(scope.row.temperature)}} ℃</span>
</template>

如图：

                <el-table :data="currentCabinData"style="width: 100%" stripe border height="100"><el-table-column prop="name"label="设备仓" fixed></el-table-column><el-table-column prop="temperature" ><!-- 表头项 --><template slot="header"slot-scope="scope"><span class="mgrinr1">温度</span><d2-icon name="thermometer-2"style="font-size: 18px;" /></template><!-- 行数据项 -->    <template slot-scope="scope">{{ scope.row.temperature }} <!-- scope.row.prop -->   <span v-show="scope.row.temperature"class="unit-color">℃</span></template></el-table-column><el-table-column prop="humidity"><template slot="header"slot-scope="scope"><span class="mgrinr1">湿度</span><d2-icon name="tint"style="font-size: 18px;" /></template><template slot-scope="scope">{{ scope.row.humidity }}<span v-show="scope.row.humidity"class="unit-color">%</span></template></el-table-column></el-table>

上述el-table中关键字可以实现border纵向边框、stripe斑马线、固定表头或表列、多级表头、最小表高度、行单选、多选、数据过滤、展开行数据、树形数据懒加载、自定义表头、行尾统计、合并行或列等效果

使用header-cell-style属性修改表头样式，可为函数或对象：

使用cell-style属性更改表格中某个单元格的样式，可为函数或对象：

<!-- html -->
<el-table :header-cell-style="rowClass" :cell-style="cellStyle">
</el-table>

//在method里面写上方法
cellStyle({row, column, rowIndex, columnIndex}){if(rowIndex === 1 && columnIndex === 2){ //指定坐标return 'background:pink'}else{return ''}
}

el-table表格在表头和数据行添加图标、处理数据相关推荐

element表格在表头和数据行添加图标
<template slot="header" slot-scope="scope"></template>
原生的HTML Table表格实现表头添加斜杠
原生的HTML Table表格实现表头添加斜杠其实就是实现类似的这样一个功能,但是呢,方式很多,有的要固定长宽,有的要固定大小,有的要写JS,有的要用动画,很费劲,然后从网上找了一个demo,稍微改 ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
table表格固定表头，内容滚动显示
目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...
pandas删除数据行中的重复数据行、基于dataframe所有列删除重复行、基于特定数据列或者列的作何删除重复行、删除重复行并保留重复行中的最后一行、pandas删除所有重复行（不进行数据保留）
pandas删除数据行中的重复数据行.基于dataframe所有列删除重复行.基于特定数据列或者列的作何删除重复行.删除重复行并保留重复行中的最后一行.pandas删除所有重复行(不进行数据保留) 目 ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
Element表格之表头合并、行合并和列合并
文章目录一.合并表头二.合并表格行三.合并表格列最近写vue开发项目的时候,很多地方用到了Element组件中的Table 表格.经过一周的边学边做,我总结了以下三种有关表格的合并方法. 一. ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...

el-table表格在表头和数据行添加图标、处理数据

通过header插槽自定义表头：

可以通过scope.row.columnName 获取单元项数据进行数据处理：

使用header-cell-style属性修改表头样式，可为函数或对象：

使用cell-style属性更改表格中某个单元格的样式，可为函数或对象：

el-table表格在表头和数据行添加图标、处理数据相关推荐

最新文章

热门文章