element中遇到的表格问题总结
2024-08-23 04:06:54
1、列表表头的颜色自定义
<el-table :data="pageData" style="width: 100%;" height="500" border tooltip-effect="dark" :header-cell-style="getRowClass"
:row-style="tableRowStyle">
:row-style="tableRowStyle">
//设置第一行背景色
getRowClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex == 0) {
return 'background:#f5f7fa'
}else{
return ''
} },
tableRowStyle({ row, rowIndex }){
return 'background-color: #F7F6Fd'
}
2、表头中文字居中
header-align="center"
<el-table-column prop="partName" label="部件名称" header-align="center" fixed>
3、表头中文字断行
<el-table-column prop="Length" :render-header="renderHeader" header-align="center" label="规格(长/深)*宽*(高/厚)" width="190px">
renderHeader (h) {
return [h('p', {}, ['规格']),h('p', {}, ['(长/深)*宽*(高/厚)'])]
},、
4、table表格高度自适应
<el-table :data="pageData" style="width: 100%" :height="tableHeight">
data() {
return {
tableHeight:window.innerHeight-x}
}
其中x不加px
最新文章
- Goodbye 2016 总结与展望
- 以self-contained方式在Linux上部署ASP.NET Core站点
- modelsim仿真xilinx mig ip core相关问题
- mysql 简单练习
- 原创:无错版!让DEDE只生成一个RSS文件,不分栏目
- 利用linq快速判断给定数字是否包含在某个段范围内
- Maven生成可以直接运行的jar包的多种方式
- Saltstack自动化操作记录(2)-配置使用
- 嵌入式-迅为iTOP-4418/6818开发板编译Android镜像技术分享
- JavaScript 世界万物诞生记
- grep配置颜色显示
- Spark记录-Spark性能优化解决方案
- UVA 624 CD[【01背包】(输出路径)
- readystatechange事件
- 有用的java工具
- Trie树 理解
- BZOJ 1008 [HNOI2008]越狱 排列组合
- 对double数据类型的数据保留两位小数,并且进行四舍五入
- sys模块的问题,深浅COPY的应用场景,元祖与购物车程序练习-打印彩色\033[31;1m--------\033[0m
- kafka-0.9