首页 前端知识 vue3 vxe-table 封装通用Grid业务组件

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

2024-06-18 23:06:22 前端知识 前端哥 90 784 我要收藏

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

功能

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

Props

/**
*@params customConfig:是否启用自定义列配置项
*@params gridHeight 组件自定义高度
*@params toolbarButton 工具栏按钮
*@params operteButton 操作列按钮
*@params queryApi grid 请求api
*@params extraQueryParams 默认请求参数
*@params needWatchToQuery 联动表格 需监听extraQueryParams 再请求
*/
  • customConfig 自定义列配置项默认为true,当页面列不多无需自定义时,可传入false隐藏
  • columns 可使用useCommon 钩子启用缓存列,需在路由route配置meta:{ jsonType: '静态列数据类型标识' } 并且有对应的JSON文件;或者直接在页面定义columns传入;
  • extraQueryParams 页面默认请求参数,不会被清除;
  • clickFallBack 工具栏、操作列事件回传至父组件, 参数为btn: string, row?: any: btn 当前点击的事件标识;row 操作列点击时的行数据
  • 未传值queryApi | needWatchToQuery 为true时,不会触发请求

使用

<template>
  <div>
   <Grid
      ref="gridRef"
      :columns="tableColumn"
      :toolbar-button="toolbarButtonConfig"
      :operte-button="operateButtonConfig"
      :query-api="omsOrder"
      :extra-query-params="extraQueryParams"
      @click-fall-back="clickFallBack"
      @query-options="queryHeaderOptions()"
    />
  </div>
</template>
<script setup lang="ts">
const gridRef = ref<ComponentRef | null>(null)
const clickFallBack = (btn: string, row?: any)=>{}
</script>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12738.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!