提供给用户使用的表格样式自定义工具,适用于elementUI表格
介绍
给用户提供了可以自定义修改elementUI表格的能力,通过混入(mixins)使用,必须先安装element-ui。
通过npm安装:
npm i el-table-customizer
使用方法如下:
<script>
import tableCustomTool from 'el-table-customizer'
export default {
mixins:[tableCustomTool],
}
</script>
目前支持修改
- 字体颜色
- 背景颜色
- 边框颜色
- 文本位置
- 文本粗细
- 文字大小
- 可以隐藏/显示某些列
- 本地保存修改后的列宽
说明
感兴趣的话可以下载下来试一试,不过目前版本仍然可能存在一些问题。代码写的比较丑,而且实现的方法也非常的笨拙粗暴,原谅我,现在技术还很差,但已经在努力学习了。
Git地址:https://github.com/heng4719/el-table-customizer
提供给用户使用的表格样式自定义工具,适用于elementUI表格的更多相关文章
- vue element-ui表格里时间戳转换成时间显示
工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- JqGrid 自定义子表格 及 自定义Json 格式数据不展示
项目第一次使用JqGrid ,发现功能强大,但由于对他不熟悉,也没有少走弯路,记录一下. 1.引用 <link href="~/Scripts/JqGrid/jqgrid/css/ui ...
- 关于element-ui表格样式设置的方法cell-class-name
关于element-ui表格使用的一些方法 最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台 ...
- delphi 设置表格样式。
//设置表格样式 wordDoc.Tables.Item(1).Borders.Item(Word.WdBorderType.wdBorderLeft).LineStyle = Word.WdLine ...
- CSS:表格样式(设置表格边框/文字/背景的样式)
使用CSS能够制作出十分精美的表格. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC " ...
- 普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
随机推荐
- 「浙江理工大学ACM入队200题系列」问题 F: 零基础学C/C++39——求方程的解
本题是浙江理工大学ACM入队200题第四套中的F题 我们先来看一下这题的题面. 由于是比较靠前的题目,这里插一句.各位新ACMer朋友们,请一定要养成仔细耐心看题的习惯,尤其是要利用好输入和输出样例. ...
- java学习之注解
0x00前言 1.注解是什么: (1)可以叫做注释类型,注解是一种引用数据类型,编译后也是生成class文件 (2)提供信息给编译器: 编译器可以利用注解来探测错误和警告信息 比如 @Override ...
- luoguP1505旅游(处理边权的树剖)
/* luogu1505 非常简单的处理边权的树剖题. 在树上将一条边定向,把这条边的权值赋给这条边的出点 树剖的时候不计算lca权值即可 */ #include<bits/stdc++.h&g ...
- 给ofo共享单车撸一个微信小程序
想学一下微信小程序,发现文档这东西,干看真没啥意思.所以打算自己先动手撸一个.摩拜单车有自己的小程序,基本功能都有,方便又小巧,甚是喜爱.于是我就萌生了一个给ofo共享单车撸一个小程序(不知道为啥of ...
- 基于python的数学建模---时间序列
JetRail高铁乘客量预测--7种时间序列方法 数据获取:获得2012-2014两年每小时乘客数量 import pandas as pd import numpy as np import mat ...
- 基于.NET 7 的 WebTransport 实现双向通信
Web Transport 简介 WebTransport 是一个新的 Web API,使用 HTTP/3 协议来支持双向传输.它用于 Web 客户端和 HTTP/3 服务器之间的双向通信.它支持通过 ...
- Xamarin.Android带参数返回上一级界面
在ActivityA跳转到ActivityB后.activityB返回到ActivityA并带参数返回 首先再activitya中跳转到b var intent = new Intent(this, ...
- vue cli2安装
安装nodejs npm install -g npm npm自动更新到最新版本 node -v或者npm -v 查看nodejs是否安装成功 1 2 配置淘宝镜像 npm config set ...
- python关于error: invalid command 'bdist_wheel报错的解决
看了很多解决办法,大部分在扯去下载一个 .whl 源文件然后在pip 安装,经过我亲自测试执行完这句即可解决! pip3 install wheel
- Class文件解析
1 准备工作 获取class文件byte[] public static byte[] getFileBytes(File file) { try (FileInputStream fileInput ...