【项目经验】elementui--table表格自定义表头及bug

简介: elementui--table表格自定义表头及bug(避坑)

一.思路

  1. 首先我们肯定得循环表头,我们原生js封装的表格的实现原理就是这样。
  2. 其次我们要把自己循环的label显示出来,对应的prop也要和表格数据相对应。
  3. 用div标签循环都会出现错误(div里面套column),大家不要踩坑。第一项会跑到最后一项,去掉div即可

二.代码

// html部分 用template循环也可以
<div class="tableDiv">
            <el-table :data="tableData" height="250" border style="width: 100%">
                <el-table-column 
                    v-for="(col, index) in cols" 
                    :key="index" 
                    :prop="col.prop" 
                    :label="col.label"
                    header-align="center" 
                    width="155" 
                    align="center">
                </el-table-column>
            </el-table>
 </div>
// js部分 注意cols数据格式
data () {
        return {
            cols: [
                {
                    label: "姓名",
                    prop: 'name'
                },
                {
                    label: "年龄",
                    prop: 'age'
                },
                {
                    label: "身高",
                    prop: 'clas'
                },
                {
                    label: "职业",
                    prop: 'job'
                },
                {
                    label: "工作经历",
                    prop: "jobs"
                }
            ],
            tableData: [
                {
                    'name': "禹宝宝",
                    "age": "18",
                    "clas": "185",
                    "job": "三目运算符创始人",
                    "jobs": "vue4.0突出贡献者"
                }
            ]
        };
    },

三.为什么div不行

     prop和label是cols中的属性,也是el-table-column标签里设置的属性,放在div里就不是那个属性了,简单来说就是div中的prop和label与el-table-column没关联起来

相关文章
|
6月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
59 19
|
5月前
|
前端开发 程序员 UED
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
77 0
|
5月前
|
API
9.SPA项目开发之动态树+数据表格+分页
9.SPA项目开发之动态树+数据表格+分页
45 0
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
931 0
|
6月前
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
element table表格表头动态渲染效果demo(整理)
element table表格表头动态渲染效果demo(整理)
|
前端开发 JavaScript
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
243 0
|
JavaScript
vue怎么实现element表格里表头信息提示功能?
vue怎么实现element表格里表头信息提示功能?
303 0
vue怎么实现element表格里表头信息提示功能?