elementUI表格表头内容自动生成

最新推荐文章于 2024-07-17 14:14:01 发布

hyfadd

最新推荐文章于 2024-07-17 14:14:01 发布

阅读量265

点赞数

分类专栏： vue+elementui 文章标签： vue.js

原文链接：https://blog.csdn.net/huihuiliu_/article/details/103123801

版权

vue+elementui 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

转载自：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 属性的值。