解决element里面el-table中表头和内容错位

24 篇文章 0 订阅
11 篇文章 0 订阅

哎,element真是一个让人又爱又恨的东西,你用着很爽想华丽丽原地转圈的时候,它就会出来绊你一脚…
怎么办,还能怎么办,填坑呗,没办法,就像寄人篱下,你只能忍气吞声…
不扯,进主题吧,
这个是一个el-table写的限制了宽度的可左右滚动的表格,这样看是挺正常的。
在这里插入图片描述
但是往右滑的时候,笑容逐渐消失…
在这里插入图片描述
???怎么回事,本来还为它是个直男而烦恼,但是想想直男总比渣男好,但是现在算什么,说歪(wan)就歪(wan)了?
哎 真是让人秃头…
好吧…开始求助某度…
在这里插入图片描述
ok ,我也不知道为啥要写个这个,但是照着写肯定没错
然而…并没有效果…
又度了一会…
在这里插入图片描述
行吧,那就这样干吧…
哈哈哈哈哈哈 不好意思 还是不行…
可能看不起我吧…
哎 还是去element的官方文档碰碰运气吧
在这里插入图片描述
发现el-table有这样一个方法…
虽然没感觉有什么用,但死马当活马医,试试先吧…
在请求数据回来之后走一个这个

getList().then(res=>{
	this.list=res.data.rows;
	this.$nextTick(()=>{
		this.$refs.table.doLayout();
		//给table加一个ref
	})
})

在这里插入图片描述
此处应有掌声!!!

哎 前端太难了 一点点小问题就能把我搞死 好饿 下班吃饭

  • 9
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
Element Plus 的 el-table-v2 组件支持自定义多级表头,可以通过 el-table-column 的 children 属性来实现。具体步骤如下: 1. 在 el-table-column 设置 prop 和 label 属性,用于显示表头名称和对应的数据字段。 2. 如果需要设置多级表头,可以在 el-table-column 设置 children 属性,并在其嵌套新的 el-table-column 组件,重复步骤1。 3. 如果需要合并表头单元格,可以在 el-table-column 设置 rowspan 和 colspan 属性。 4. 如果需要自定义表头样式,可以在 el-table-column 设置 headerStyle 属性。 下面是一个示例代码,展示了如何使用 el-table-v2 自定义多级表头: ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column label="成绩"> <el-table-column prop="math" label="数学"></el-table-column> <el-table-column prop="english" label="英语"></el-table-column> <el-table-column prop="chinese" label="语文"></el-table-column> </el-table-column> <el-table-column prop="total" label="总分" rowspan="2"></el-table-column> </el-table> </template> <script> import { ref } from "vue"; import { ElTable, ElTableColumn } from "element-plus"; export default { components: { ElTable, ElTableColumn, }, setup() { const tableData = ref([ { name: "张三", math: 80, english: 90, chinese: 85, total: 255 }, { name: "李四", math: 75, english: 85, chinese: 90, total: 250 }, ]); return { tableData, }; }, }; </script> ```
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值