elementUI表格表头内容自动生成

转载自：https://blog.csdn.net/huihuiliu_/article/details/103123801
https://blog.csdn.net/summerfor2015/article/details/106816064/
rander-header:表头换行显示，目前表头是以空格做界限换行显示的，也可以换成 /, -, | 等等
fixed:固定表格列，如果表格前面要加序号，则序号列也要固定，否则的话，序号列会显示在固定列之后

<el-table :data="tableData" stripe style="width: 100%"><el-table-column type="index" width="50" :fixed="true"></el-table-column><el-table-column v-for="(item,index) in hearderList" :key="index" label="item" :fixed="index===0 || index===1" :rander-header="renderHeader"><template slot-scope="scope">{{ scope.row[item] }}</template></el-table-column>
</el-table>

data() {hearderList: ['aaa one', 'bbb two', 'ccc three'],tableData:[{'aaa one': '1111111', 'bbb two': '11111-2222', 'ccc three': '11111-3333'},{'aaa one': '2222222', 'bbb two': '22222-2222', 'ccc three': '22222-3333'},{'aaa one': '3333333', 'bbb two': '33333-2222', 'ccc three': '33333-3333'},{'aaa one': '4444444', 'bbb two': '44444-2222', 'ccc three': '44444-3333'}]
},
methods: {renderHeader(h, {column, $index}){return h('span', {}, column.label.split(' ')[0]),h('br'),h('span', {}, column.label.split(' ')[1])}
}

第二种表格头操作方法

<el-table :data="tableData" stripe style="width: 100%"><el-table-column type="index" width="50" :fixed="true"></el-table-column><el-table-column v-for="(item,index) in hearderList" :key="index" label="item" :fixed="index===0 || index===1"><template slot="header">{{ item.split(' ')[0] + '\n' + item.split(' ')[1] }}</template><template slot-scope="scope">{{ scope.row[item] }}</template></el-table-column>
</el-table>

只有\n是不会换行的，还需添加样式white-space

<style>
.el-table .cell {white-space: pre-line;
}
</style>

white-space 属性设置如何处理元素内的空白

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>` 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

elementUI表格表头内容自动生成相关推荐

element-ui表格表头内容限制不换行
https://www.cnblogs.com/YuKiee/p/9110894.html 在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表 ...
elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
帮你早点下班~基于飞书API实现next.js网站内容自动生成实践
前言最近在公司里得到了一项任务,人事给了一个飞书的职位表格 ,要求将里面的信息更新到官网上面去.其中涉及了已有岗位的信息更新,删除部分岗位和添加部分岗位.这种工作虽然简单,但是很琐碎,很麻烦. 三 ...
python读取word文档结构图_python根据文章标题内容自动生成摘分享的实例
如何用Python玩转TF-IDF之寻找相似文章并生成摘要应用1:关键词自动生成核心思想是对于某个文档中的某个词,计算其在这个文档中的标准化TF值,然后计算这个词在整个语料库中的标准化IDF值.在 ...
excel怎样修改表格时间和计算机一制,Excel表格中如何自动生成记录数据的日期和时间...
前几天有人问我:Excel表格在录入信息时如何在日期单元格自动生成日期时间? 在录入表格的时候,我们经常需要录入时间,比要填写出入库时间,为了减少录入的工作量,可以把日期设置为自动生成. 例如我们在B ...
elementui 表格表头竖着显示_Vue+Element自定义纵向表格表头教程
如下所示: 代码如下: {{ item.key }} {{ item.value }} 绑定的是 statDatas 属性是一个 json数组,由key value组成的json,如果需要多列就直接增 ...
代码生涯冲常见的的bug.例如layui表格中日期自动生成、eacharts 报表的重复点击事件
1.layui表格中日期不受控制的自动生成,这种情况往往是你设置了日期类型的强转例对于这种情况你需要定义templet模板 1. {field: 'outtime', title: '离开时间', ...
文字内容自动生成PPT
第一次需求: 输入一段文字: 识别文字标题: 根据文字内容自动将文字分成段落: 生成PPT文件: 将文字标题放入PPT文件的第一页: 将文字内容按段落内容放置在PPT 文件的不同页面上 : 将文字标题 ...
C#利用Graphics类绘制进阶--根据文字内容自动生成指定旋转角度图片
public System.Drawing.Image BuildBitmap(string content, System.Drawing.Font font, float py)//根据文字自动生 ...

elementUI表格表头内容自动生成

elementUI表格表头内容自动生成相关推荐

最新文章

热门文章