仰望.-CSDN博客

原创 dom-zindex 统一管理弹窗 z-index，解决不同组件库 z-index 互相遮挡问题

dom-index 弹窗遮挡解决方法

2023-08-27 14:36:08 443

原创 vxe-table 更新最新版本后图标兼容性问题

vxe-table 更新最新版本后图标兼容性问题

2022-12-10 21:22:46 1733 1

vxe-table 虚拟树、树形表格的使用如果开启虚拟树，只需要设置 y-scroll.gt（纵向虚拟滚动，默认100）或 x-scroll.gt （横向虚拟是滚动）transform 自动将列表转换为树结构rowKey 行的主键parentKey 行的父级主键<vxe-table :tree-config="{transform: true, rowKey: 'id', parentKey: 'parentId'}" :data="tableData"> <

2021-11-03 21:32:30 5568 3

原创 vxe-table 解决 tooltip 被弹出框遮挡

vxe-table 表格 tooltip 被弹出框遮挡，z-index 层级过低，解决方案通过设置参数解决，具体看文档import VXETable from 'vxe-table'// 全局默认参数VXETable.setup({ version: 0, zIndex: 999, // 想多高就设置多高 table: { autoResize: true }})...

2021-05-27 14:45:08 4906

原创 vxe-table 隐藏排序图标，去掉、不显示筛选图标，更换图标

vxe-table 隐藏排序图标，去掉、不显示筛选图标，更换图标通过设置 sort-config 和 filter-config 就可以分别设置对应的配置项：排序：sort-config.showIcon 设置是否显示图标sort-config.iconAsc 升序箭头图标sort-config.iconDesc 降序箭头图标筛选：filter-config.showIcon 设置是否显示图标filter-config.iconNone 默认显示的图标，指定 class 字体图标filt

2021-04-16 09:49:43 5101 1

原创 vxe-table 和 vxe-grid 的区别，有什么区别

vxe-table vxe-table 和 vxe-grid 有什么区别说明table（基础表格）grid（高级表格）用法使用标签配置 <vxe-column field=“xx” …/>使用 JSON 配置：{ field: ‘xx’, … }动态列√ 部分√ 全动态 JSON基础参数及事件√√边框√√序号√√复选框√√单选框√√高亮行或列√√格式化内容√√筛选√√多列

2021-03-25 18:35:10 9246 1

原创 vxe-table 导出 excel xlsx wps pdf 导出数据

vxe-table 导出 excel xlsx wps 导出数据默认支持的导出格式为：txt、html、xml、cvs导出 xlsx如果需要导出为 xlsx 格式文件，就需要用到 xlsx.js 这个库来转换数据，然后再安装 vxe-table-plugin-export-xlsx 导出插件，安装完成后列表中就可以选择 xlsx 类型了。npm install vxe-table-plugin-export-xlsx xlsx导出 pdf如果需要导出为 pdf 格式文件，就需要用到 j

2020-12-21 20:19:27 6527 21

原创 vxe-table 在单元格中渲染简单的饼图

vxe-table 在单元格中渲染简单的饼图有时候遇到比较特殊的需求，比如在很小的单元格中要放个饼图，如果使用 echart 等图表插件又显得太笨重了，毕竟单元格大小有限，vxe-table 官方也提供了一个非常流畅简单图表渲染，仅用于单元格，具体如下：bar-柱状图props:属性描述类型bar.width柱子宽度numberbar.max柱子最大值numbercolors柱子颜色列表string[]tooltip.formatter提示内容

2020-12-19 22:37:31 2100 2

原创 vxe-table 使用分组表头列头

vxe-table 使用分组表头列头2.x 版本使用 vxe-table-column 标签递归方式<vxe-table :data="tableData" show-overflow> <vxe-table-column title="基本信息"> <vxe-table-column type="seq" width="60"></vxe-table-column> <vxe-table-column field="name"

2020-09-29 17:37:53 7340 6

原创 vxe-table 如何关闭虚拟滚动、设置虚拟滚动触发规则

vxe-table 如何关闭虚拟滚动、设置虚拟滚动触发规则vxe-table 支持高性能的虚拟渲染，但是有些功能是不支持虚拟渲染的，比如展开行、自适应高度…等虚拟滚动的参数是由以下控制的：scroll-x 用于控制横向虚拟滚动，gt 当大于指定条数时自动启用，默认 60，如果为 -1 则关闭虚拟滚动scroll-y 用于控制纵向虚拟滚动，gt 当大于指定条数时自动启用，默认 100，如果为 -1 则关闭虚拟滚动全局设置VXETable.setup({ table: { scrollX

2020-09-12 10:21:46 8504

原创 vxe-table 更新 v2.9.17+ 解决表格原始数据无法被校验问题，表格校验无效问题

vxe-table 更新 v2.9.17+ 解决表格原始数据无法被校验问题，表格校验无效问题旧的 validate 用法，无论数据是否发生变动，都会校验全量数据：//...methods: { // ... submitEvent(){ // 全量校验 this.$refs.xTable.validate().then(errMap => { if (errMap) { // 校验不通过！ } else {

2020-08-27 12:25:29 5093

原创 vxe-table 给列格式化日期，格式化单元格

vxe-table 给列格式化日期，格式化数据可以使用 xe-utils 函数库对日期进行格式化，然后显示在单元格中<vxe-table border :data="tableData"> <vxe-table-column field="name" title="Name"></vxe-table-column> <vxe-table-column field="sex" title="Sex" formatter="formatSex"&gt

2020-08-10 18:39:57 4855 3

原创 vxe-table Import on demand 按需加载详细教程

vxe-table 按需加载，详细教程首先通过 cli 创建一个项目（如果你问 cli 怎么安装的话，建议自觉走开，没必要往下看了）vue create my-projectcd my-projectnpm run serve项目创建完成，正常跑起来3. 先来打个包npm run build打包完成，空项目的情况下 vue 打包后的大小为 128KB接着安装 vxe-tablenpm install vxe-table xe-utils引用依赖 src/plug

2020-06-22 19:04:25 6517 7

原创 vxe-grid proxy pager 数据代理分页、自定义分页、自定义返回数据结构

vxe-table vxe-grid 数据代理分页、自定义返回数据结构vxe-grid 是一套集成完整功能的数据表格，接下来使用其他一个数据代理功能来完成列表查询。上线配置 proxy-config，props 属性用于自定义返回的数据字段，ajax 用于配置请求接口首页 grid 在读取完配置信息后，默认会触发 ajax.query 动作去请求数据，必须返回一个 Promise，数据结构可以自行定义<vxe-grid border resizable pager-config

2020-06-01 12:55:06 9317 4

原创 vxe-table vxe-grid column width 宽度问题，fixed 列样式错乱、显示隐藏导致、keep-alive 列宽错误等的解决方法

vxe-table 宽度问题，v-show 显示隐藏导致列宽错误，解决方法解决方法（任意一种都可以解决问题）只需要加上 :auto-resize=“true” 就可以自动重新计算表格，默认是关闭的也可以手动调用 recalculate 方法去重新计算表格<vxe-table auto-resize ... ></vxe-table><vxe-grid auto-resize ... ></vxe-grid>

2020-05-26 15:17:16 18283 4

原创 vxe-table vxe-pager 如何使用分页，自定义分页

vxe-table 如何使用分页，自定义分页表格和分页是两个不同的组件，可以搭配在一起使用，具体如下：<vxe-table show-overflow height="200" row-id="id" :loading="loading1" :data="tableData1"> <vxe-table-column type="checkbox" width="60"></vxe-table-column> <vxe-table-

2020-05-26 14:59:20 12548 1

原创 jspdf vxe-table 导出 pdf 文件，解决中文乱码问题

vxe-table 导出 pdf 文件，解决中文乱码问题将表格导出为 pdf 文件，默认是不支持中文的，会显示成乱码，可以通过使用字体库解决。npm install xe-utils vxe-table vxe-table-plugin-export-pdf jspdf`// ...import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'// ...VXETable.use(VXETablePluginExportPD

2020-05-26 13:23:09 2541

原创 vxe-table Multi-field sort 如何实现多字段排序

vxe-table 如何实现多字段排序通过给列指定 sort-by 属性，可以是单个字段或者多个字段数组。<vxe-table border highlight-hover-row height="400" :data="tableData"> <vxe-table-column type="seq" width="60"></vxe-table-column> &l

2020-05-20 21:33:45 3783

原创 vue 使用 vxe-list 实现虚拟列表实现虚拟树，virtual list 大数据量树列表

vxe-table vxe-list 实现虚拟树，大数据量树列表在 vue 渲染树结构是比较卡的，特别是数据大了，展开缩写都要几秒，那么解决问题的思路就是减少 dom 渲染，使用虚拟列表来模拟树结构，这个方式可以渲染大量的数据，缺点是每次点击展开、收缩都要重新更新列表，可能会闪一下，效果略差，但是支持渲染大数据量。实现虚拟树的步骤：拍平树结构构建列表树结构处理展开收缩测试中：渲染...

2020-04-28 22:37:21 8492 1

原创 vxe-table 更新 v2.9+ 解决表格自定义校验报错问题

vxe-table 更新 v2.9+ 解决表格自定义校验报错问题旧的自定义校验用法validator(rule, cellValue, callback){ if (isError) { // 如果校验失败，则返回 callback(new Error('校验不通过提示消息')) } else { // 如果校验成功 callback() }}新的用法，由于 2....

2020-04-07 16:29:06 6105 1

原创 vxe-table 如何用回车键替换 Tab 键功能，回车切换到右侧单元格，回车切换下一个单元格

vxe-table 如何自定义 Tab 键和回车键功能默认的快捷键功能是 Tab 键用于切换左右单元格，回车键用于切换到下面的单元格，由于在实际的项目需求中，需要用到特殊需求，比如回车键切换向右单元格，这样就可以编辑完一个接着编辑下一个，一般的处理方式可以通过监听 keyup 事件去实现，方式比较繁琐的。不过看到一个 vxe-table-plugin-shortcut-key 快捷键插件...

2020-04-04 12:45:43 5046 2

原创 vxe-table 如何实现全表都可以编辑，所有列可编辑

vxe-table 如何实现全表都可以编辑这种方式虽然可以实现，但该方式是非常糟糕，应该避免使用这种方式<vxe-table border show-overflow ref="xTable" height="500" :data="tableData" :edit-config="{tr...

2020-03-07 16:37:19 9513 2

原创 vxe-table 为什么调用 insert 方法动态插入的数据没有同步到 data 中

vxe-table 为什么调用 insert 方法动态插入的数据没有同步到data 中问题分析：看官方文档的说明就是任何动态新增的数据都属于临时数据，不会双向同步到绑定的 data 属性中其实按照文档的说法管理增删改查共有两种方式：<vxe-table border keep-source ref="xTable" :edit-config="{trigger: ...

2020-03-05 21:16:21 7865 3

原创 vxe-table 更新 v2.8+ 后出现报错：缺少必要的 keep-source 参数，这可能会导致出现错误

vxe-table 缺少必要的 “keep-source” 参数，这可能会导致出现错误，更新 v2.8+ 后出现问题解决问题原因：看文档的说明应该是 v2.8+ 对数据的优化，所有数据状态相关的表格都必须加上 keep-source 才有效，否则会出现特定功能无法正常渲染，比如数据修改状态显示、数据还原等…<vxe-table border :edit-conf...

2020-03-04 18:08:06 9620

原创 vxe-table column width error，宽度问题，列宽错误，在 Tab 页切换显示隐藏中导致样式错乱的解决方法

vxe-table 在 Tab 页切换显示隐藏中导致样式错乱的解决方法问题原因：由于在隐藏的 div 中去初始化表格无法计算宽度的，所以会导致表格切换后样式错乱，dom 渲染中只有可视元素才存在宽度，如果元素处于隐藏状态是无法计算的；所以应该确保表格渲染时父元素处于可视状态<div> <ul> <li @click="showTab = 1">...

2020-02-12 15:17:11 5238 1

原创 vxe-table checkbox range 实现复选框鼠标快速选择

@[TOC](vxe-table 实现复选框鼠标圈选)设置 checkbox-config={range: true} 开启复选框圈选功能<vxe-grid border resizable show-overflow highlight-hover-row ref="xGrid" height="530" :data="tableData"...

2020-01-31 21:03:18 8109 3

原创 vxe-table renderer 渲染器详解，render 渲染器使用方式

@[TOC](vxe-table 渲染器详解，强大到没朋友的渲染器使用方式)vxe-table 渲染器什么场景需要用到呢？需要实现不同单元格编辑组件（比如：输入框、下拉框、日期选择等…）需要定制高级筛选（比如：实现类似 Excel 筛选框或定制更加强大自定义筛选等…）业务太多，构建可复用的渲染器一键生成可配置化表格等default-render 渲染配置正常情况下，如果...

2019-12-26 17:41:42 38215 9

原创 vxe-table 实现 json 数据生成带 CRUD 功能的表格

@[TOC](vxe-table 实现 json 数据生成带 CRUD 功能的表格)先熟悉 vxe-grid 数据代理基本使用<vxe-grid border resizable height="500" :columns="tableColumn" :pager-config="tablePage" :toolbar="tableToolbar" :proxy-conf...

2019-12-25 00:13:34 4542

原创 vxe-table 使用编辑表格，在单元格使用输入框时无法输入值

vxe-table 使用编辑表格，在单元格使用输入框时无法输入值data 中未存在列字段属性导致无法编辑例如以下代码解决方法data 中未存在列字段属性导致无法编辑这个就和 vue 的实现方式的问题了，vue 的双向绑定是先监听 data 中的所有属性，然后在组件更新后同步值，如果在渲染之前不存在对应的字段名，那 vue 就无法初始化数据监听，导致数据无法同步更新例如以下代码role 这一...

2019-12-17 15:05:27 7799

原创 vxe-table 中自定义模板，解决渲染单元格为 element-ui 组件后无法选中值

vxe-table 中自定义模板，渲染单元格为 element-ui 组件如何解决跨组件之间的事件冲突例如以下代码解决方法如何解决跨组件之间的事件冲突vxe-table 强大之处就是可以支持任意的 vue 组件，但在渲染大部分组件后默认是无法直接使用的，需要解决好跨组件之间的事件冲突例如以下代码虽然可以正常渲染和显示，但是会无法选中下拉选项，这就是跨组件的事件冲突，下面会提到解决办法&l...

2019-12-17 14:49:46 9256 13

原创分享几个比较好用 js 表格组件、vue 表格组件（持续更新）

Vue 常用的表格组件（持续更新）element-ui https://element.eleme.cn/2.9/#/zh-CN/component/table 表格组件iview https://iviewui.com/components/table 表格组件vxe-table https://xuliangzhan.github.io/vxe-table/ 表格组件，支持增删改查、海量...

2019-06-06 16:23:43 48684 4

原创 elemnet-ui 项目使用 vue-element-extends 报错 Unknown custom element: el-

ElemnetUI 项目在更新 vue-element-extends 1.1 版本时报错：Unknown custom element: <el-editable> - did you register the component correctly? For recursive components, make sure to provide the “name” option....

2019-04-08 11:13:36 4486

原创 elx-editable: Duplicate presence of slot default found in the same render tree - this will likely

基于 ElemnetUI 的项目，在引入第三方扩展库 vue-element-extends 使用自定义模板渲染时报错找到问题原因是 vue 版本语法问题：vue2.6以上语法<template v-slot:edit="scope"><template>vue2.6以下语法<template slot="edit" slot-scope="scope"&...

2019-04-07 21:37:37 3490 1

原创如何使用 xe-utils 格式化日期

如何使用 xe-utils 格式化日期安装npm install xe-utilsXEUtils.setup({ formatDate: 'yyyy-MM-dd HH:mm:ss.SSS', // 默认的 toStringDate 参数 formatString: 'yyyy-MM-dd HH:mm:ss', // 默认的 toDateString 参数 formatStrin...

2019-02-21 13:05:00 1291

xe-ajax3.4.13.js 封装 fetch 异步请求 javascript 库

基于 Promise API 的异步请求函数，支持 node.js、browser 环境

2018-11-26

vxe-ajax1.3.4.js

VXEAjax 用于Vue全局安装 xe-ajax 安装完成后自动挂载在vue实例 this.$ajax

2018-02-10

xe-ajax-mock1.4.9.js

基于 XEAjax 扩展的前端虚拟服务插件，对于前后端分离开发模式，使用 ajax+mock 就非常有必要。兼容性任何支持 Promise 的环境都能运行，低版本浏览器使用 babel 转码支持 IE8+、Edge、Chrome、Firefox、Opera、Safari等...

2018-02-10

xe-ajax3.0.13.js

XEAjax 一个不依赖于任何框架、开源的请求函数，支持XHR、jsonp以及mock等常用函数，其特点是高易用性、高扩展性、向后兼容 fetch 及完善的API 兼容性任何支持 Promise 的环境都能运行，低版本浏览器使用 babel 转码支持 IE8+、Edge、Chrome、Firefox、Opera、Safari等...

2018-02-10