介绍

给用户提供了可以自定义修改elementUI表格的能力,通过混入(mixins)使用,必须先安装element-ui。

通过npm安装:

    npm i el-table-customizer

使用方法如下:

<script>
import tableCustomTool from 'el-table-customizer'
export default {
mixins:[tableCustomTool],
}
</script>

目前支持修改

  1. 字体颜色
  2. 背景颜色
  3. 边框颜色
  4. 文本位置
  5. 文本粗细
  6. 文字大小
  7. 可以隐藏/显示某些列
  8. 本地保存修改后的列宽

说明

感兴趣的话可以下载下来试一试,不过目前版本仍然可能存在一些问题。代码写的比较丑,而且实现的方法也非常的笨拙粗暴,原谅我,现在技术还很差,但已经在努力学习了。

Git地址:https://github.com/heng4719/el-table-customizer

提供给用户使用的表格样式自定义工具,适用于elementUI表格的更多相关文章

  1. vue element-ui表格里时间戳转换成时间显示

    工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...

  2. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  3. JqGrid 自定义子表格 及 自定义Json 格式数据不展示

    项目第一次使用JqGrid ,发现功能强大,但由于对他不熟悉,也没有少走弯路,记录一下. 1.引用 <link href="~/Scripts/JqGrid/jqgrid/css/ui ...

  4. 关于element-ui表格样式设置的方法cell-class-name

    关于element-ui表格使用的一些方法 最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台 ...

  5. delphi 设置表格样式。

    //设置表格样式 wordDoc.Tables.Item(1).Borders.Item(Word.WdBorderType.wdBorderLeft).LineStyle = Word.WdLine ...

  6. CSS:表格样式(设置表格边框/文字/背景的样式)

    使用CSS能够制作出十分精美的表格. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC " ...

  7. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  8. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  9. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

  10. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

随机推荐

  1. ES6 学习笔记(十一)迭代器和生成器函数

    1.前言 JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性(迭代).从以前的for循环到之后的filter.map再到后来的for...in和for...of的迭代机制.只要 ...

  2. android 代码分析

    1.@Override注解 @Override 注解是用来指定方法重写的,只能修饰方法并且只能用于方法重写,不能修饰其它的元素. 作用是告诉编译器检查这个方法,保证父类要包含一个被该方法重写的方法,否 ...

  3. 源码级深度理解 Java SPI

    作者:vivo 互联网服务器团队- Zhang Peng SPI 是一种用于动态加载服务的机制.它的核心思想就是解耦,属于典型的微内核架构模式.SPI 在 Java 世界应用非常广泛,如:Dubbo. ...

  4. day14-HTTP01

    HTTP协议 1.什么是HTTP协议? 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用广泛的一种网络协议.是工作在tcp/ip协议基础上的,所有的ww ...

  5. Windows版CheatSheet——一键显示当前程序快捷键列表

    Windows系统上的各种软件有太多的快捷键,想要记住是几乎不可能的,推荐一个一键显示当前软件快捷键的软件,在使用其他程序的时候,只要按下Ctrl+`就可以理解弹出该软件的所有快捷键列表,还支持收藏功 ...

  6. Java新特性(2):Java 10以后

    您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 虽然到目前为止Java的版本更新还没有什么惊天动地的改变,但总是会冒出一些有趣的小玩意.前面列举了Java9和Java10的一些特色,现在接着来 ...

  7. 第三方模块的下载与使用、requests模块、爬取链家二手房数据、openpyxl模块、hashlib加密模块

    目录 第三方模块的下载与使用 下载第三方模块可能会出现的问题 网络爬虫模块之requests模块 网络爬虫实战之爬取链家二手房数据 自动化办公领域之openpyxl模块 第三方模块的下载与使用 第三方 ...

  8. 一步一图带你深入理解 Linux 物理内存管理

    1. 前文回顾 在上篇文章 <深入理解 Linux 虚拟内存管理> 中,笔者分别从进程用户态和内核态的角度详细深入地为大家介绍了 Linux 内核如何对进程虚拟内存空间进行布局以及管理的相 ...

  9. linux deb系 apache 配置解析php文件

    安装apache服务器和php服务 sudo apt-get install apache2 php 然后其实一般来说什么也不用安装了就可以成功解析php文件了 制作一个测试文件,test.php放到 ...

  10. C++编程笔记(多线程学习)

    目录 一.线程创建 二.线程的相关操作 2.1 join 2.2 detach 2.3 joinable 三.线程参数 3.1传参所引发的资源回收问题 3.2 将对象的成员函数作为入口函数 四.线程的 ...