OpenTiny NEXT 从入门到精通·第 3 篇

OpenTiny NEXT 从入门到精通·第 3 篇数据篇——表格、表单与图表的高级应用企业级中后台系统80% 的页面都是“增删改查”的数据处理场景。表格承载着海量数据的展示与操作表单负责复杂业务信息的录入与校验图表则将枯燥的报表转化为直观的洞察。TinyVue 的表格、表单和图表组件不仅功能完备更在性能优化、复杂交互、配置化等方面提供了企业级能力。本篇将带你深入这些核心数据组件的进阶用法让你的数据处理如虎添翼。你是否曾因表格加载万条数据就卡顿而头疼是否因表单联动的层层回调写得像“面条代码”而苦恼是否因图表主题与系统风格不统一而反复调整样式TinyVue 的TinyGrid表格、TinyForm表单和TinyChart图表正是为这些痛点而生。它们不仅提供了开箱即用的强大功能更在细节上考虑到了企业级场景的各种复杂需求。本篇文章将从以下几个方面展开TinyGrid 企业级表格组件深度实战虚拟滚动、树形表格、拖拽排序、列配置等TinyForm 复杂表单场景解决方案动态表单项、校验、联动、配置式表单TinyChart 数据可视化图表应用图表类型、主题适配、响应式一、TinyGrid——企业级表格组件深度实战TinyGrid 是 TinyVue 中功能最强大的组件之一它基于原生 Table 实现但封装了大量企业级特性。下面我们从基础到进阶逐一解锁。1.1 基础表格配置与列定义一个标准的表格通常需要配置数据源、列定义、操作列等。template tiny-grid :datatableData :height500 tiny-grid-column typeselection width50/tiny-grid-column tiny-grid-column fieldname title姓名 sortable/tiny-grid-column tiny-grid-column fieldage title年龄 width100/tiny-grid-column tiny-grid-column fieldaddress title地址 show-overflow/tiny-grid-column tiny-grid-column fieldcreateTime title创建时间 :formatterdateFormatter/tiny-grid-column tiny-grid-column title操作 width150 template #default{ row } tiny-button typetext clickeditRow(row)编辑/tiny-button tiny-button typetext clickdeleteRow(row)删除/tiny-button /template /tiny-grid-column /tiny-grid /template script setup import { ref } from vue import { TinyGrid, TinyGridColumn } from opentiny/vue const tableData ref([...]) // 数据源 const dateFormatter ({ cellValue }) { return new Date(cellValue).toLocaleDateString() } /script关键属性说明sortable开启列排序show-overflow内容超出时显示省略号并 hover 显示完整内容formatter自定义单元格格式化函数1.2 虚拟滚动——10 万条数据渲染不卡顿当表格数据量很大时例如 10 万行直接渲染所有 DOM 节点会导致页面卡顿甚至崩溃。TinyGrid 内置了虚拟滚动机制只渲染可视区域内的行滚动时动态更新。启用虚拟滚动tiny-grid :databigData :height400 virtual-scroll !-- 列定义 -- /tiny-grid仅需添加virtual-scroll属性即可轻松支持大数据量。实测 10 万行数据滚动依然丝滑流畅。资深提示启用虚拟滚动时需要给表格设置固定高度通过height属性否则无法计算可视区域。1.3 行内编辑、多级表头、树形表格行内编辑通过edit-config配置开启行内编辑支持输入框、选择器等编辑器。tiny-grid :datatableData :edit-config{ trigger: click, mode: row } tiny-grid-column fieldname title姓名 :edit-render{ name: input }/tiny-grid-column tiny-grid-column fieldgender title性别 :edit-render{ name: select, options: genderOptions }/tiny-grid-column /tiny-grid多级表头通过嵌套tiny-grid-column实现。tiny-grid-column title个人信息 tiny-grid-column fieldname title姓名/tiny-grid-column tiny-grid-column fieldage title年龄/tiny-grid-column /tiny-grid-column树形表格适用于展示层级数据如组织架构、目录树。只需设置tree-config并指定children字段。tiny-grid :datatreeData :tree-config{ children: children } !-- 列定义 -- /tiny-grid1.4 表格拖拽排序基于 SortableJSTinyGrid 集成了 SortableJS可以轻松实现行拖拽排序。tiny-grid :datatableData row-draggable row-dragendhandleDragEnd /tiny-gridconsthandleDragEnd({newIndex,oldIndex}){constdraggedItemtableData.value.splice(oldIndex,1)[0]tableData.value.splice(newIndex,0,draggedItem)// 可调用接口保存新的排序顺序}1.5 列拖拽调整、列显隐控制列拖拽调整宽度用户可通过拖动列边界调整列宽表格会自动记忆需配合resizable属性。tiny-grid :datatableData resizable列显隐控制通过配置列的visible属性结合 UI 控制哪些列显示。template tiny-checkbox-group v-modelvisibleColumns tiny-checkbox labelname姓名/tiny-checkbox tiny-checkbox labelage年龄/tiny-checkbox /tiny-checkbox-group tiny-grid :datatableData tiny-grid-column fieldname title姓名 :visiblevisibleColumns.includes(name)/tiny-grid-column tiny-grid-column fieldage title年龄 :visiblevisibleColumns.includes(age)/tiny-grid-column /tiny-grid /template二、TinyForm——复杂表单场景解决方案表单是数据录入的核心TinyForm 提供了校验、动态表单项、联动、布局等企业级能力。2.1 表单校验规则配置与自定义校验器TinyForm 内置了丰富的校验规则required、email、url、min、max 等也支持自定义校验函数。template tiny-form :modelformData :rulesrules refformRef tiny-form-item label用户名 propusername tiny-input v-modelformData.username/tiny-input /tiny-form-item tiny-form-item label邮箱 propemail tiny-input v-modelformData.email/tiny-input /tiny-form-item tiny-button typeprimary clicksubmit提交/tiny-button /tiny-form /template script setup import { ref, reactive } from vue const formData reactive({ username: , email: }) const rules { username: [ { required: true, message: 请输入用户名, trigger: blur }, { min: 3, max: 20, message: 长度在 3 到 20 个字符, trigger: blur } ], email: [ { required: true, message: 请输入邮箱, trigger: blur }, { type: email, message: 请输入正确的邮箱地址, trigger: blur } ] } const formRef ref() const submit async () { await formRef.value.validate() // 校验通过提交数据 } /script自定义校验器construles{phone:[{validator:(rule,value,callback){if(!/^1[3-9]\d{9}$/.test(value)){callback(newError(请输入正确的手机号))}else{callback()}},trigger:blur}]}2.2 动态表单项与条件渲染在实际业务中表单的字段可能根据用户选择动态增减。TinyForm 配合 Vue 的响应式系统可以轻松实现。template tiny-form :modelformData tiny-form-item label类型 proptype tiny-radio-group v-modelformData.type tiny-radio labelA类型A/tiny-radio tiny-radio labelB类型B/tiny-radio /tiny-radio-group /tiny-form-item !-- 类型A 才显示的字段 -- tiny-form-item v-ifformData.type A labelA字段 propaField tiny-input v-modelformData.aField/tiny-input /tiny-form-item !-- 类型B 才显示的字段 -- tiny-form-item v-ifformData.type B labelB字段 propbField tiny-input v-modelformData.bField/tiny-input /tiny-form-item /tiny-form /template2.3 表单联动与数据回填表单项之间的联动如省市区三级联动可以通过监听值变化实现。template tiny-form :modelformData tiny-form-item label省份 propprovince tiny-select v-modelformData.province changeonProvinceChange tiny-option v-forp in provinces :keyp.code :labelp.name :valuep.code/tiny-option /tiny-select /tiny-form-item tiny-form-item label城市 propcity tiny-select v-modelformData.city :disabled!formData.province tiny-option v-forc in cities :keyc.code :labelc.name :valuec.code/tiny-option /tiny-select /tiny-form-item /tiny-form /template script setup import { ref, reactive } from vue const formData reactive({ province: , city: }) const provinces ref([]) const cities ref([]) const onProvinceChange async (provinceCode) { // 请求城市列表 cities.value await fetchCities(provinceCode) formData.city } /script2.4 配置式表单——支持低代码平台可视化配置TinyForm 支持通过 JSON 配置生成表单这在低代码平台中非常有用。你可以定义字段列表然后动态渲染。template tiny-form :modelformData tiny-form-item v-forfield in formFields :keyfield.prop :labelfield.label :propfield.prop component :isgetComponent(field.type) v-modelformData[field.prop] v-bindfield.props / /tiny-form-item /tiny-form /template script setup import { TinyInput, TinySelect, TinyDatePicker } from opentiny/vue const formFields [ { type: input, label: 用户名, prop: username, props: { placeholder: 请输入用户名 } }, { type: select, label: 性别, prop: gender, props: { options: [{ label: 男, value: 1 }, { label: 女, value: 2 }] } }, { type: date, label: 生日, prop: birthday } ] const getComponent (type) { const map { input: TinyInput, select: TinySelect, date: TinyDatePicker } return map[type] } /script三、TinyChart——数据可视化图表应用TinyChart 是基于 ECharts 封装的 Vue 组件继承了 ECharts 的全部能力同时提供了响应式、主题适配等增强功能。3.1 基于 ECharts 的图表组件封装安装依赖npminstallopentiny/vue-charts基础用法template tiny-chart :optionschartOptions height400px / /template script setup import { TinyChart } from opentiny/vue-charts const chartOptions { title: { text: 销售趋势 }, xAxis: { type: category, data: [1月, 2月, 3月, 4月] }, yAxis: { type: value }, series: [{ type: line, data: [120, 200, 150, 80] }] } /script3.2 常用图表类型折线图、柱状图、饼图、漏斗图TinyChart 支持 ECharts 所有图表类型通过options.series.type指定。柱状图constbarOptions{xAxis:{type:category,data:[苹果,华为,小米]},yAxis:{type:value},series:[{type:bar,data:[320,280,190]}]}饼图constpieOptions{series:[{type:pie,data:[{name:A,value:30},{name:B,value:50},{name:C,value:20}]}]}漏斗图适用于销售转化场景constfunnelOptions{series:[{type:funnel,data:[{name:访问,value:1000},{name:咨询,value:300},{name:订单,value:80}]}]}3.3 图表主题适配与响应式调整TinyChart 可以自动跟随 OpenTiny 的主题系统亮色/暗色无需额外配置。同时图表容器尺寸变化时如窗口缩放图表会自动调用resize方法。手动控制主题tiny-chart :optionsoptions themedark /响应式监听如果图表所在容器大小不是由窗口变化引起例如折叠面板展开可以手动调用resizetemplate tiny-chart refchartRef :optionsoptions / /template script setup import { ref } from vue const chartRef ref() const handleResize () { chartRef.value?.resize() } // 在折叠面板展开等时机调用 handleResize /script3.4 高阶图表HUICharts 图表库的应用OpenTiny 还提供了更专业的数据可视化组件库HUICharts商业版包含丰富的业务图表如仪表盘、地图、关系图等。如果基础 TinyChart 无法满足需求可以考虑 HUICharts。四、实战构建一个带图表的数据仪表盘综合以上知识点我们来实现一个简单的销售数据仪表盘包含顶部 KPI 卡片中间销售趋势折线图底部产品销量柱状图 表格template div classdashboard !-- KPI 卡片 -- div classkpi-row tiny-card classkpi-card div classkpi-title总销售额/div div classkpi-value¥{{ totalSales.toLocaleString() }}/div /tiny-card tiny-card classkpi-card div classkpi-title订单数/div div classkpi-value{{ totalOrders }}/div /tiny-card tiny-card classkpi-card div classkpi-title转化率/div div classkpi-value{{ conversionRate }}%/div /tiny-card /div !-- 趋势图 -- tiny-card title月度销售趋势 tiny-chart :optionstrendOptions height300px / /tiny-card !-- 产品销量榜 -- tiny-card title产品销量榜 tiny-grid :dataproductRanking height300 tiny-grid-column fieldname title产品名称/tiny-grid-column tiny-grid-column fieldsales title销量 sortable/tiny-grid-column tiny-grid-column fieldrevenue title销售额 sortable template #default{ row }¥{{ row.revenue.toLocaleString() }}/template /tiny-grid-column /tiny-grid /tiny-card /div /template script setup import { ref, computed } from vue import { TinyCard, TinyGrid, TinyGridColumn, TinyChart } from opentiny/vue // 模拟数据 const totalSales ref(1258000) const totalOrders ref(3245) const conversionRate computed(() ((totalOrders.value / 50000) * 100).toFixed(2)) const trendOptions { xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: { type: value, name: 销售额(万) }, series: [{ type: line, data: [120, 200, 150, 180, 220, 280], smooth: true }] } const productRanking ref([ { name: 智能手机, sales: 890, revenue: 3560000 }, { name: 笔记本电脑, sales: 520, revenue: 4160000 }, { name: 平板电脑, sales: 410, revenue: 1435000 } ]) /script style scoped .dashboard { padding: 20px; } .kpi-row { display: flex; gap: 20px; margin-bottom: 20px; } .kpi-card { flex: 1; text-align: center; } .kpi-title { font-size: 14px; color: #666; } .kpi-value { font-size: 28px; font-weight: bold; margin-top: 8px; } /style总结本篇我们深入学习了 TinyVue 中三大核心数据组件的企业级应用TinyGrid 表格基础配置、列定义、排序、格式化虚拟滚动支持 10 万 数据行内编辑、多级表头、树形表格拖拽排序、列宽调整、列显隐控制TinyForm 表单内置校验与自定义校验动态表单项与条件渲染表单联动与数据回填配置式表单JSON 驱动TinyChart 图表基于 ECharts 的封装支持常用图表类型主题适配与响应式调整实战构建数据仪表盘掌握这些组件的高级用法你就能应对企业级应用中 90% 的数据处理场景大幅提升开发效率和用户体验。下篇预告《智能篇——OpenTiny NEXT 智能化能力深度解析》将带你探索 OpenTiny NEXT 最核心的 AI 能力生成式 UI、WebMCP 协议、NEXT-SDKs 以及 WebAgent 实战开启前端智能开发的新篇章敬请期待如果觉得本文对你有帮助欢迎点赞、收藏、评论你的支持是我持续创作的动力