前言：工作中用到 vue+element ui 的前端框架，需要使用自定义表头，需要使用 re。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9710826.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github

代码如下：

<html>

<head>

    <title>自定义表头</title>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">

</head>

<body>

<div id="app">

    <p style="color: red;">所有的打印数据，均在打印区里。

        表格上的表头可以自定义表头，比如加个按钮，或者加一些其他的标签，甚至可以使用 elementUI 的其他标签，也可以添加事件。</p>

    <el-table :data="tableData" style="width: 100%">

        <el-table-column label="姓名" width="100" prop="name">

        </el-table-column>

        <el-table-column label="备注" width="180" prop="remark" :render-header="remarkRenderHeader">

        </el-table-column>

        <el-table-column label="操作" :render-header="optRenderHeader">

        </el-table-column>

    </el-table>

    <br/>

    <div style="margin-top: 20px">

        <span>打印区</span>

        <el-input type="textarea" v-model="printStr"></el-input>

    </div>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="../lib/vue.js"></script>

<script type="text/javascript" src="../lib/elementui/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            printStr: "",

            selectOptions : [

                {value : "1", label : "选择一"},

                {value : "2", label : "选择二"},

                {value : "3", label : "选择三"},

            ],

            tableData: [{

                date: '2000-10-27',

                name: '余小乐',

                address: '北京',

                isRich: false,

                remark : "我是备注",

                selectOption : "2",

                sex : "0"

            }, {

                date: '2016-05-04',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1517 弄',

                isRich: true,

                remark : "",

                selectOption : "",

                sex : "1"

            }, {

                date: '2016-05-01',

                name: '小花',

                address: '重庆市璧山区',

                isRich: true,

                remark : "",

                selectOption : "",

                sex : "0"

            }, {

                date: '1998-05-03',

                name: '二哈',

                address: '成都',

                isRich: false,

                remark : "",

                selectOption : "",

                sex : "1"

            }]

        },

        methods: {

            //在渲染表头的时候，会调用此方法，h为createElement的缩写版

            remarkRenderHeader(h, {column, $index}){

                return h("div", [

                    h("span", {}, "备注"),

                    h("el-button", {

                        attrs: {

                            "size" : "small"

                        },

                        on: {

                            click: this.handleClick

                        }

                    }, "按钮")

                ])

            },

            handleClick(){

                this.printStr = "点击按钮了";

            },

            optRenderHeader(h, {column, $index}){

                return h("span",[

                    h("span",{

                        "class":{

                            "red-star":true

                        }

                    },"*"),

                    h("span","加个星号操作列"),

                ])

            }

        }

    });

</script>

</body>

</html>

完。整体代码见 GitHub，喜欢就star，不定时更新。

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9710826.html

 

vue + element ui 表格自定义表头，提供线上demo的更多相关文章

  1. vue+element ui 表格自定义样式溢出隐藏

    样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...

  2. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  3. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  4. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  5. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  6. vue+element ui 的tab 动态增减，切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  7. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  8. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  9. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

随机推荐

  1. 弦论(tjoi2015,bzoj3998)(sam(后缀自动机))

    对于一个给定长度为\(N\)的字符串,求它的第\(K\)小子串是什么. Input 第一行是一个仅由小写英文字母构成的字符串\(S\) 第二行为两个整数\(T\)和\(K\),\(T\)为0则表示不同 ...

  2. AVL树的实现——c++

    一.概念 AVL树是根据它的发明者G.M. Adelson-Velsky和E.M. Landis命名的.它是最先发明的自平衡二叉查找树,也被称为高度平衡树.相比于"二叉查找树",它 ...

  3. 前端入门html（标签介绍）

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...

  4. 实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符 如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。

    实现一个算法,寻找字符串中出现次数最少的.并且首次出现位置最前的字符如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少).并且比其 ...

  5. JMeter性能测试-服务器资源监控插件详解

          零.引言 我们对被测应用进行性能测试时,除了关注吞吐量.响应时间等应用自身的表现外,对应用运行所涉及的服务器资源的使用情况,也是非常重要的方面,通过实时监控,可以准确的把握不同测试场景下服 ...

  6. Python初体验（一）—【配置环境变量】【变量】【input】【条件语句】【循环语句】

    写在前面的: 作为一个控制专业的女研究生,不知道每天在研究什么,但总归逃脱不了码代码的命运.之前也学习过一些C语言.C++,基础嘛,稍稍微有一些.本不想走上码农的道路,天真烂漫的过此生(白日梦过程中. ...

  7. 剑指offer四十四之翻转单词顺序列

    一.题目 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,“student ...

  8. java泛型---通配符,泛型嵌套

    package generic; import java.util.ArrayList; import java.util.List; /** * ? -->通配符,类型不确定,用于声明 变量| ...

  9. 关于C++中操作符重载的疑问 ：四个运算符=, -&gt;, [], ()不可以重载为全局函数（友员函数）

    转载自:http://blog.csdn.net/u014610226/article/details/47679323     以下是对C++中不能重载为友元函数的四个运算符进行了详细的分析介绍,需 ...

  10. Maven 学习笔记(三)

    Maven生命周期 在上次我们使用maven package 对项目进行打包.这里就是为其指定一个生命周期.生命周期是包含在一个项目构建中的一系列有序的阶段.Maven有许多不同的生命周期,比如验证( ...