sh-view

介绍

1. 基于vxe-table扩展，功能更强大，配置更便捷，内置18种渲染器，灵活配置，足以满足您的业务需求！
2. 完全兼容vxe-table原有组件及功能，完全可以自主扩展更多的自定义组件

组件

自封装组件，不依赖其他ui框架

1. 默认全局安装： ShAlert, ShBadge, ShCard, ShCodeEditor, ShCol, ShCorner, ShCountTo, ShDrawer, ShEmpty, ShForm, ShHeader, ShIcon, ShImage, ShList, ShLoading, ShModal, ShNoticebar, ShPoptip, ShProgress, ShPullRefresh, ShQuery, ShResult, ShRow, ShSplit, ShGrid, ShTable, ShTabs, ShTag, ShToolbar, ShTree, ShUpload, ShWaterFall, ShWaterMark

2. 手动安装（业务）： ShCronModal(cron表达式), ShMarkdown(富文本编辑), ShMenu(菜单、支持竖向、横向、收起)

安装教程

版本：vue 3.x

npm install sh-tools sh-view@next

import { createApp } from 'vue'
import ShView from 'sh-view'
// 进行全局自定义，可扩展性更强
let options = {
	uiOption: {},
	tableOption: {},
	menuOption: {},
	editorOption: {},
	validateOption: {}
}
createApp(App).use(ShView, options).mount('#app')

使用说明

1. table与form的二次封装完全保留的vxe-table的所有功能，在其基础上进行扩展
2. table与form支持了公式配置计算，并解决了公式互相依赖计算问题，全局配置如下

    // 以下为默认配置
    // enabled 为false,则关闭公式计算
    // data 为扩展参数计算的数据，例如一些计算要从系统的菜单或者用户信息中取数据使用，计算时会进行Object.assign({}, row, data),注意data中的信息会覆盖
    // type 参数说明  all：实时全局计算，row: 整行计算，编辑后整行所有公式均计算，edit: 按需计算，编辑后所有依赖此字段的项进行重新计算
    uiOption.caculateConfig = {
       enabled: true,
       type: 'edit',
       data: {}
    }
	// 例如有 a b c d四个字段 存在公式 c = d * 2, a = b + c, 则会优先计算 c, 然后再进行计算  a = b + c得到正确的结果
    // 示例表头配置
    // 注意支持公式计算的只有 $vMoney 及 $vNumber渲染器
    let columns = [
		{ field: a, title: 'a', renderName: '$vMoney', renderPorps: { formula: '{b} + {c}' } },
		{ field: b, title: 'b', renderName: '$vMoney' },
		{ field: c, title: 'c', renderName: '$vMoney', renderPorps: { formula: '{d} * 2' } },
		{ field: d, title: 'd', renderName: '$vMoney' },
    ]
    // 更多公式计算配置 详见  sh-tools 内有详细说明

3. table支持了金额切换，全局配置如下

    // 以下为默认配置
    // enabled 为false,则关闭金额
    // titleUnit 渲染器为 $vMoney的表头 是否显示金额单位
    // options 为金额切换下拉数据源
    uiOption.moneyConfig = {
	    enabled: false,
		titleUnit: true,
		options: [
		{ value: 1, label: '元', digits: 2 },
		{ value: 1000, label: '千元', digits: 4 },
		{ value: 10000, label: '万元', digits: 6 }
	]
}

4. table的导入导出功能完善，完全进行重构，高级导出面板更使用于用户使用，扩展了导出是否在表头上增加金额单位，及自定义的表格ID，及表头信息，用于在导出的模板在导入时进行校验，支持了多级表头的导入导出 详见 userTable.js 中的onExportData方法 且导入导出方法中增加了事件钩子 如果导出全量数据时，要配置 getAllDataMethod去数据 导入时增加了 importBefore, importValidate, importFinished, downloadTemplate, downloadFinished等钩子用户自定义校验及处理数据

5. code编辑器组件，扩展了编码自动补全方案，

    // 以下为示例配置
    // jsSnippets 为js模式扩展的自定义自动补全
    // sqlSnippets 为sql模式扩展的自定义自动补全
    // jsonSnippets 为json模式扩展的自定义自动补全
    uiOption.codeConfig = {
	    jsSnippets: [
			{ label: 'const', content: 'const ${}', detail: 'const' },
			{ label: 'let', content: 'let ${}', detail: 'let' }
        ],
		sqlSnippets: [
			{ label: 'select', content: 'select ${}', detail: 'select' },
			{ label: 'sf', content: 'select * from ${}', detail: 'select * from' }
        ],
		jsonSnippets: []
    }

项目预览