功能
- 基于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://blog.csdn.net/bosslay/article/details/127431617
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_7779.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。