el-table fixed多级表头固定列问题

个人踩过的坑，记录一下。多级表头固定列问题，先记录三点吧

可以复制对应的代码去饿了么官网运行，粘贴到html将<template>替换，注意不要替换了<div>

一、

当我们需要固定一级表头时，往往是最简单的。下图中固定的姓名，其实就是一级表头，别看右侧的配送信息是多级的，你只固定姓名，那么只看姓名这一列是否为一级。如果此案例的姓名不是一级表头，那么固定是失败的，见第二个

<!-- 上图代码 -->
<template><el-table:data="tableData"height="350"style="width: 100%"><el-table-columntype="index"label="序号"width="62"fixed               :index="indexMethod"></el-table-column><el-table-columnprop="name"label="姓名"fixedwidth="150"></el-table-column><el-table-column label="配送信息"><el-table-columnprop="date"label="日期"width="120"></el-table-column><el-table-column label="地址"><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table-column></el-table-column></el-table>
</template>

二、

当我们的一级表头单独一行时，即使我给姓名和日期加了fixed属性，它也不会固定，这算是element的一个小bug了吧，没办法，要想固定就得砍掉一级标题，要不然就给想固定的列上方加一级表头，见第三个

<!-- 上图代码 -->
<template><el-table:data="tableData"height="350"style="width: 100%"><el-table-columntype="index"label="序号"width="62"fixed               :index="indexMethod"></el-table-column><el-table-column label="一级标题" align="center"><el-table-columnprop="name"label="姓名"fixedwidth="150"></el-table-column><el-table-columnprop="date"label="日期"fixedwidth="120"></el-table-column><el-table-column label="地址"><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table-column></el-table-column></el-table>
</template>

三、

当我们的表格有两个或者多个一级表头时，若想固定下图中的前三列（除序号外），那么就必须要给“一级标题1”这一列的宽度=包含的列宽总和。比如下面的三个姓名列，每列是150，一级标题1的宽度就是450

<!-- 上图代码 -->
<template><el-table:data="tableData"height="350"style="width: 100%"><el-table-columntype="index"label="序号"width="60"fixed               :index="indexMethod"></el-table-column><el-table-columnlabel="一级标题1"align="center"width="450"fixed><el-table-column prop="name"label="姓名111"width="150"></el-table-column><el-table-column prop="name"label="姓名222"width="150"></el-table-column><el-table-column prop="name"label="姓名333"width="150"></el-table-column></el-table-column><el-table-column label="一级标题2" width="120"     align="center"><el-table-columnprop="date"label="日期"width="120"></el-table-column><el-table-column label="地址"><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table-column></el-table-column></el-table>
</template>

最近遇到的问题，在此记录一下，如果有错误的地方，欢迎指正。

el-table fixed多级表头固定列问题相关推荐

elementUI table多级表头固定列
设置宽度和fixed // 1.2需要固定,3不固定 <el-table ref="table" :data="tableData" border :ce ...
el-table 多级表头固定列问题
当我们的表格有两个或者多个一级表头时,若想固定,那么就必须要给"一级标表头"这一列的宽度=包含的列宽总和.比如下面的三个姓名列,每列是150,一级标表头的宽度就是450 <t ...
HTML table标签实现表头固定
HTML table标签实现表头固定 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
bootstrap-table固定表头固定列
bootstrap-table固定表头固定列 1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-tabl ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
bootstrap表头如何展示不动_bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js data-tog ...
el-table多级表头固定多列
项目场景: 项目要求表格实现多级标题,并且表格滚动条向右滚动时,前四列锁定,效果如图: 问题描述 elementUI给的例子中只有一级标题解决方案: 1:给一级标题添加fixed,实现固定 2.给一 ...
element table 合计第一行固定列
element table 合计第一行在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获 ...
iview table组件里的固定列表格不自适应问题
当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [{title: ...

el-table fixed多级表头固定列问题

一、

二、

三、

el-table fixed多级表头固定列问题相关推荐

最新文章

热门文章