介绍

给用户提供了可以自定义修改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. KubeEdge架构问题汇总

    Q1 :KubeEdge云和边的数据协同有什么优势? A :  K8s的原生架构中, Node (Kubelet) 是通过List-watch机制主动与Master通信.List-watch机制有几个 ...

  2. c#入参使用引用类型为啥要加ref?

    摘一段来自官网的说明 :方法的参数列表中使用 ref 关键字时,它指示参数按引用传递,而非按值传递. ref 关键字让形参成为实参的别名,这必须是变量. 换而言之,对形参执行的任何操作都是对实参执行的 ...

  3. 【云原生 · Kubernetes】Kubernetes容器云平台部署与运维

    [题目1]Deployment管理 在master节点/root目录下编写yaml文件nginx-deployment.yaml,具体要求如下: (1)Deployment名称:nginx-deplo ...

  4. php + layui 文件上传 以及 拖拽上传

    HTML: <div id="box"> <div id="drop_area">将文件拖拽到此区域</div> <d ...

  5. SSH(一)架包的引入

    一年多未使用了,有些东西真的会忘. 一.ssh的图形化记忆运作流程 二.Struts2.hibernate.spring需要引用的jar包 Struts2: 基本开发:struts-2.3.32\ap ...

  6. 【微服务架构设计实施】第一部分:架构篇-1:微服务架构与Spring Cloud介绍

    〇.概述 一.微服务架构与Spring Cloud (一)概念 不同说法:细粒度的.清凉组件化的小型SOA(面向服务架构) 统一说法:小型应用程序(服务组件),使用轻量级设计方法和HTTP协议通信 理 ...

  7. 【Java框架】SSM-Spring总结:IOC、DI、AOP、JDBC、事务管理、实际案例

    〇.概述 1.常用资料 2.组成 一.控制反转与依赖注入 (一)Spring概述 1.介绍 以IOC和AOP为内核的框架 通过IOC实现控制,使用spring创建对象,与DI描述同一个概念 DI是对象 ...

  8. 【知识体系】Kafka文档汇总、组成及架构,配置,常见名词解释,命令行及api操作,官方文档内容,各部分深入,zookeeper和security,监控和运维

    〇.相关资料 1.快速搭建文档: 2.详细讲义 3.在线官方文档:http://kafka.apache.org/documentation/ 4.Kafka知识个人总结 5.KafkaPPT汇报 链 ...

  9. 【Spark】Day04-Spark Streaming:与离线批量比较、架构特点、入门案例、创建(队列、数据源)、转换(有状态、无状态)、输出方式、进阶(累加、转换为DF、缓存持久化)、实战(窗口统计)

    一.概述 1.离线和实时计算 离线:数据量大,数据不会变化,MapReduce 实时:数据量小,计算过程要短 2.批量和流式处理 批量:冷数据,数据量大,速度慢 流:在线.实时产生的数据(快速持续到达 ...

  10. [百度营]AI studio用法提醒(自用)

    持久化安装 需要设置持久化路径: !mkdir /home/aistudio/external-libraries !pip install beautifulsoup4 -t /home/aistu ...