vue element + Table表格表头样式设置
2020-06-24 04:29
225 查看
通过设置 :header-cell-style="{backgroundColor:’#fcfcfc’}"
设置每一行内容超出隐藏 :show-overflow-tooltip=“true”
设置每一行内容居中 align=“center”
第一种:
<template> <div> <el-table :data="tableData" :header-cell-style="{backgroundColor:'#fcfcfc', color: '#333'}"> <el-table-column prop="name" label="姓名" width="150" align="center" :show-overflow-tooltip="true"> </el-table-column> ... </el-table> </div> </template>
第二种:
<template> <div> <el-table :data="tableData" :header-cell-style="tabHeader" > <el-table-column prop="name" label="姓名" width="150" align="center" :show-overflow-tooltip="true"> </el-table-column> ... </el-table> </div> </template> <script> export default { methods: { tabHeader() { return 'backgroundColor:#3f4160;color:#fff' } } }
第三种:
在utils下的 tool.js中封装一个表格表头函数
//util文件夹下的tool.js // 表格头部 export const tabHeader = function () { return 'backgroundColor:#1f8e88;color:#fff;text-align:center;height:40px;padding:0;' }
<template> <div> <el-table :data="tableData" style="width: 100%" :header-cell-style="tabHeader"> <el-table-column prop="name" label="姓名" width="150" align="center" :show-overflow-tooltip="true"> </el-table-column> ... </el-table> </div> </template> <script> import { tabHeader } from '@/utils/tool' export default { data() { return { tabHeader: tabHeader, }, } }
相关文章推荐
- 关于element-ui 中 table 表头以及行内数据样式设置
- vue+element样式修改(表格错位问题、表头根据单词换行、滚动条样式)
- vue+element-ui中的el-table-column配合v-if导致列样式与位置错乱的现象
- bootstrap table 修改table内容时设置表头与表格对齐
- element-ui的table表格控件表头与内容的边框不对齐问题
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- elementUI tag标签和表格样式设置
- 表格table样式布局设置
- 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效
- vue+element-ui子页面table表格删除、停止等操作更改父页面对应数组内容
- Vue+elementui 实现复杂表头和动态增加列的二维表格功能
- CSS如何设置html table表格边框样式
- 利用vue和element-ui设置表格内容分页
- 利用 Vue 和 element 的实现table增、删、改表格数据的模糊匹配搜索
- vue-cli-element-ui-table-表格分页功能切换数据后@current-change失效的解决方案
- VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
- Javascript操作table,tr,td和表格CSS样式设置小常识
- table里面怎么设置td的样式和Excel里面的表格一样&&当光标浮动td上到元素上时如何显示全部文本。
- element-ui的table表格 表头与内容列不对齐问题
- CSS如何设置html table表格边框样式 CSS如何设置table表格边框样式 对table设置css样式边框,分为几种情况: 1、只对table设置边框 2、对td设置边框 3、对table和