vue3 + vxe-table 封装通用Grid业务组件

已于 2023-07-08 09:10:23 修改
阅读量5.3k 收藏 4
点赞数 3
分类专栏： import this 文章标签： json typescript vue.js es6 anti-design-vue
于 2022-10-20 18:08:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bosslay/article/details/127431617
版权

视频DEMO
在这里插入图片描述

功能

  • 基于vxe-table v4 / vxe-grid
  • 全局注册组件 无需单独引入
  • 动态按需引入样式vite-plugin-style-import
  • 支持传入高度 | 默认自适应高度
  • 自定义表头 slot,实现下拉、区间、日期,并对表头参数进行校验(数字、长度、指定格式等)
  • 自定义工具栏工具列,重写自定义列配置项,实现拖拽排序、Promise 缓存
  • 动态工具栏、操作列 | 监听动态传入并重新渲染 渲染器
  • 暴露方法,父组件通过 ref 可调用 Grid 方法
  • 渲染速度优化:http 请求数据 -->> 渲染列

Props

/**
*@params customConfig:是否启用自定
最低0.47元/天 解锁文章
vxe-table：一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等）
2401_84411072的博客
05-16 986
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。依赖库：vue 2.6+, xe-utils 2.4+
vuegrid是一个灵活的Vuejs表格组件
08-07
vue-grid是一个可以快速简直，并且通过表格来渲染数据的vue.js组件。
vue最强table vxe-table 虚拟滚动列表 前端导出
一步一个脚印，踏实努力，向着目标前进
12-19 6805
要自定义表格中的字段显示，你可以使用formatter属性。这个属性允许你对字段的值进行格式化或翻译。例如，假设你有一个字段名为status，它的值可能是01或2，你想将这些值显示为未开始进行中和已完成data() {return {// ... 其他数据 ...// ... 其他列定义 ...{ field: 'status', title: '状态', formatter: this.formatStatus }],},methods: {case 0: return '未开始';
vue 封装grid 布局-表单.zip
01-21
vue与element-ui和iview-ui结合grid布局封装万能的表单grid布局，含i18n和国际化
vxe-grid
最新发布
qq_62834018的博客
04-17 233
自定义表单（筛选）插槽，通过具名插槽绑定相关formConfig 的 items 项。展示顺序按items对象数组顺序，插槽只自定义插入。3.1 " { column } " columns 的自定义 cell 渲染。绑定和 具名插槽绑的某一列数据 的 columns对象的对应数据项，可以调column对象。就是formConfig中的data对象，可以调用data对象中的属性。是表格数据数组中当前行对象，通过具名插槽绑定相关column项。2. v-on绑方法，@事件 监听器。
基于vxe table封装表格组件
wwwwj的博客
08-01 699
下面是封装vxe-grid组件的简易实现，方便在项目中多处使用表格。
Vue3 简单二次封装vxe-table
a1051735098的博客
04-19 827
使用背景：使用table更加标准和简洁，同时兼顾自定义需求。
vue3+vite按需引入vxe-table
小鱼干儿的博客
10-30 2158
【代码】vue3+vite按需引入vxe-table。
vue3 vxe-table表格
码农的专栏
07-19 2168
代码】vue3vxe-table表格。
vxe-tablevue表格解决方案 v3.0.9
12-15
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
vxe-tablevue表格解决方案 v2.9.15
08-14
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代...
Vue3整合VxeTable
哈
05-16 4039
VxeTable官网：https://gitee.com/xuliangzhan_admin/vxe-table 安装 npm install xe-utils vxe-table@next main.ts中注册 import {createApp} from 'vue' //vxe-table import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' const app = createAp
vex-table for vue3的使用
renyudouhui的博客
11-18 2071
安装 npm install xe-utils vxe-table@next 在main.js中导入 import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' const app = createApp(App) app.use(VXETable) 使用 <vxe-table :data="demo1.tableData"> <vxe-table-column
Vue3栅格（Grid）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
07-18 4287
基于行（Row）和列（Col）来实现的24 栅格系统，支持：水平区块间隔；响应式区块间隔；垂直区块间隔；响应式垂直区块间隔；左右偏移；自定义排版方式；自定义对齐方式；flex 填充；响应式布局等；总之，功能丰富，简单易用，总能满足你的想象😁😁
VUE3中使用vxe-table,并且创建自定义筛选组件
热门推荐
weixin_50395373的博客
07-11 1万+
最近公司前端数据需要用到表格展示，又要在前端做筛选过滤排序。 考虑到表格性能原因，最终选择了vxe-table 第一步 先打开
Vue （grid）网格组件
Anonymous996的博客
07-05 2964
Grid API: grid Grid， Vant Grid-Item mixins 此部分代码未进行优化 严谨转载
Vue3-Datagrid：强大的虚拟数据表格组件
gitblog_00446的博客
01-08 916
Vue3-Datagrid：强大的虚拟数据表格组件 vue3-datagrid Vue 3 data grid spreadsheet 项目地址: https://gitcode.com/gh_mirrors/vu/vue3-da...
Vue-grid：一款灵活的Vue.js表格组件
gitblog_01059的博客
12-26 491
Vue-grid：一款灵活的Vue.js表格组件 vue-grid A flexible grid component for Vue.js 项目地址: https://gitcode.com/gh_mirrors/vu/vue-...
Vue 封装grid布局
weixin_41040445的博客
01-21 2765
Grid布局博客地址 Vue-iView-ui Grid布局代码有些 冗余，现在封装一套自己的grid布局 以 from表单为例 第一种方法 创建Grid 文件夹，创建Grid和GridItem 组件 Gird.vue <template> <Form :label-width="80" class="grid" :style="style"> <slot></slot> </Form> <...
vxe-table: 强大的Vue表格组件特性与设计理念
资源摘要信息:"vxe-table是基于Vue.js框架开发的一个功能丰富的表格组件，支持多种高级功能，旨在为用户提供灵活且高效的表格数据处理方案。它不仅提供了基础的表格功能，比如增删改查操作、虚拟滚动、自定义模板等...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值