vxe-table
专职
人生苦短,我用python
展开
-
Vue中的vxe-table教程26-编辑表格-弹框编辑
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 --> <!-- vue需引入--> <script src="h原创 2021-01-19 15:21:47 · 3942 阅读 · 1 评论 -
Vue中的vxe-table教程25-高级表格-完整功能
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 --> <!-- vue需引入--> <script src="htt原创 2021-01-19 12:43:10 · 6380 阅读 · 2 评论 -
Vue中的vxe-table教程24-高级表格-完整查询功能
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 --> <!-- vue需引入--> <script src="htt原创 2021-01-15 18:21:27 · 4531 阅读 · 2 评论 -
Vue中的vxe-table教程23-高级表格-表尾数据、导出、全屏、隐藏列
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-15 14:30:00 · 7011 阅读 · 1 评论 -
Vue中的vxe-table教程22-打印的使用
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-15 13:00:48 · 3677 阅读 · 1 评论 -
Vue中的vxe-table教程21-全表搜索的使用
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-14 17:17:21 · 2964 阅读 · 1 评论 -
Vue中的vxe-table教程20-模态窗口的使用
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-14 16:25:19 · 3974 阅读 · 2 评论 -
Vue中的vxe-table教程19-表单的使用
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-13 18:31:28 · 3857 阅读 · 1 评论 -
Vue中的vxe-table教程18-工具栏新增、删除、保存、列显示与隐藏
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-13 17:28:19 · 7963 阅读 · 1 评论 -
Vue中的vxe-table教程17-分页的四种用法
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-13 16:24:12 · 2154 阅读 · 1 评论 -
Vue中的vxe-table教程16-下拉框、文本域的使用
注意点:下载字体图标,并导入使用图标需引入图标对应的css文件即可使用下载地址:http://www.fontawesome.com.cn/导入方法:<link rel="stylesheet" href="./css/font-awesome.css">效果图:1. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2021-01-13 15:26:19 · 4837 阅读 · 0 评论 -
Vue中的vxe-table教程15-输入框-日期、时间、数值、密码、整数、小数等
效果图:注意: 使用图标需引入图标对应的css文件即可使用下载地址:http://www.fontawesome.com.cn/引入方式:<link rel="stylesheet" href="./css/font-awesome.css">1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-01-13 14:38:48 · 6764 阅读 · 0 评论 -
Vue中的vxe-table教程14-图标、按钮、单选框组、复选框组、开关按钮的使用
知识点:需要下载图标库,下载地址:http://www.fontawesome.com.cn/下载之后将css文件:font-awesome.css,导入即可使用图标效果图:1. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <sc原创 2021-01-13 13:21:39 · 9144 阅读 · 1 评论 -
Vue中的vxe-table教程13-总结基础表格中的完整功能
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-12 17:33:51 · 2756 阅读 · 1 评论 -
Vue中的vxe-table教程12-表格中html标签的使用
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://原创 2021-01-12 17:08:40 · 2297 阅读 · 1 评论 -
Vue中的vxe-table教程11-全局格式化内容
知识点:1. 格式化性别2. 格式化下拉选项3. 格式化日期,默认 yyyy-MM-dd HH:mm:ss4. 四舍五入金额,每隔3位逗号分隔,默认2位数5. 格式化银行卡,默认每4位空格隔开6. 四舍五入,默认两位数7. 向下舍入,默认两位数8. 转换 moment 类型为字符串效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-01-12 16:34:17 · 3435 阅读 · 0 评论 -
Vue中的vxe-table教程10-空数据、加载中的样式设置
知识点:一、空数据提示 1. empty-text="没有更多数据了!" 2. 末尾加标签 <template v-slot:empty> <span style="color: red;"> <img src="./img/img2.gif"> <p>没有更多数据了!</p> </span> </template&g原创 2021-01-12 15:32:11 · 3981 阅读 · 0 评论 -
Vue中的vxe-table教程9-表格筛选
知识点:三种筛选方式:1. Name多选筛选方式2. Sex单选筛选方式,:filter-multiple="false"3. Age输入数据判等筛选方式总结:通过设置 filters 属性和 filter-method 方法可以开启列筛选功能,通过 filter-multiple=false 设置为单选可以设置默认值:checked: true,默认筛选哪一项效果图:1. index.html代码<!DOCTYPE html><html l.原创 2021-01-12 15:04:34 · 9552 阅读 · 1 评论 -
Vue中的vxe-table教程8-表格排序
知识点:1. 基本排序:sortable2. 点击表头进行排序, trigger设置触发原,defaultSort设置默认排序字段及排序顺序,orders设置排序轮转顺序效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <sc原创 2021-01-12 13:55:08 · 10417 阅读 · 1 评论 -
Vue中的vxe-table教程7-复选框
知识点:复选框的使用 复选框选中的记录高亮显示 不满足条件的记录禁用复选框效果图:1. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue">原创 2021-01-12 11:45:54 · 7181 阅读 · 3 评论 -
Vue中的vxe-table教程6-表头分组、行列高亮显示
知识点:表头分组 行hover事件和高亮显示事件 列hover事件和高亮显示事件效果图:1. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"&原创 2021-01-12 11:04:20 · 6197 阅读 · 0 评论 -
Vue中的vxe-table教程5-列宽拖动、高度自适应、页脚追加聚合统计行
知识点:显示或隐藏表头 表格列宽拖动 表格高度自适应可以设置表格最大高度值 页脚追加量两行,一行平均值、一行求和效果图:1. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdel原创 2021-01-11 16:48:22 · 10035 阅读 · 4 评论 -
Vue中的vxe-table教程4-水平滚动条、冻结列、页脚追加聚合统计
知识点:水平滚动条的设置 左边冻结列的设置 页脚加一行对指定列进行求和的设置效果如图:1. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"&g原创 2021-01-11 15:35:41 · 6708 阅读 · 2 评论 -
Vue中的vxe-table教程2-在线运行
脱离Vue项目环境和Vue服务器,直接CDN导入文件,在线运行。注意:vue、xe-utils、vxe-table必须在开头就导入,而我们自定义的main.js需要放在最后导入,这样才能把数据加载到页面,而main.css在开头或最后导入均可。1. html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&l原创 2021-01-07 18:11:45 · 2619 阅读 · 1 评论 -
Vue中的vxe-table教程1-vue项目中运行
1. 安装vxe-table及其依赖包使用淘宝的镜像下载比较快cnpm install xe-utils vxe-table2. vue项目下的src目录下的main.js中导入相关模块main.js中增加如下几行代码import 'xe-utils'import VXETable from 'vxe-table'import 'vxe-table/lib/style.css'Vue.use(VXETable);3. src目录下的App.vue文件中删除原有代码,输入如原创 2021-01-07 17:01:15 · 6492 阅读 · 3 评论 -
Vue中的vxe-table教程3-尺寸、序号、列宽、自动换行、斑马线、边框、圆角、单元格样式、页脚添加合计
1. 先上效果图:2. index.html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="h原创 2021-01-08 17:59:00 · 13819 阅读 · 5 评论