基于Vue和Quasar的前端SPA项目实战动态表单（五）通过上篇文章回顾关于Vue和Quasar的前端SPA项目实际序号（四）介绍，我们已经完成了元数据中序号的增删改查，本文主要介绍动态表单设计功能的实现。介绍在crudapi系统中，所有的业务表单都是通过配置动态生成的，代码不需要硬编码。基本概念可以参考上一篇文章元数据管理——动态表单设计器在crudapi系统中的完整实现。表单配置完成后，会自动生成对应的crud界面。UI界面表单列表创建表单索引管理API表单API包括基本的CRUD操作，可以通过swagger文档查看。通过axios封装api，名称为metadataTableimport{axiosInstance}from"boot/axios";constmetadataTable={create:function(data){returnaxiosInstance.post("/api/metadata/tables",data);},更新:function(id,data){returnaxiosInstance.patch("/api/metadata/tables/"+id,data);},list:function(page,rowsPerPage,search,query){if(!page){page=1}if(!rowsPerPage){rowsPerPage=10}returnaxiosInstance.get("/api/metadata/tables",{params:{offset:(page-1)*rowsPerPage,limit:rowsPerPage,search:search,...query}});},count:function(search,query){returnaxiosInstance.get("/api/metadata/tables/count",{params:{search:search,...query}});},get:function(id){returnaxiosInstance.get("/api/metadata/tables/"+id,{参数:{}});},getByName:function(name){returnaxiosInstance.get("/api/metadata/tables/name/"+name,{params:{}});},delete:function(id){returnaxiosInstance.delete("/api/metadata/tables/"+id);},batchDelete:function(ids){returnaxiosInstance.delete("/api/metadata/tables",{data:ids});}};导出{元数据表};核心代码q-table控件表单设计页面使用q-table控件，每个字段对应一行，columnsdefinitioncolumns定义了q-table的column属性，涵盖了form的所有属性，比如name，是否为一，数据类型，长度等。列：[{名称：“dataClickAction”，对齐：“中心”，标签：“操作”，字段：“dataClickAction”，可排序：false}，{名称：“displayOrder”，对齐：“左”，标签：“顺序",field:"displayOrder",sortable:false},{name:"caption",align:"left",label:"中文名",field:"caption",sortable:false},{name:"name",align:"left",label:"英文字段",field:"name",sortable:false},{name:"description",align:"left",label:"description",field:"description",可排序：假}，{名称：“无符号”，对齐：“左”，标签：“无符号”，字段：“无符号”，可排序：假}，{名称：“数据类型”，对齐：“左”，标签：“数据类型”，字段：“数据类型”，可排序：假}，{名称：“索引类型”，对齐：“左”，标签：“索引类型”，字段：“索引类型”，可排序：假}，{名称："indexStorage",align:"left",label:"indexstorage",field:"indexStorage",sortable:false},{name:"indexName",align:"left",label:"搜索名称",field:"indexName",sortable:false},{name:"length",align:"left",label:"长度",field:"length",sortable:false},{name:"precision",align:"left",label:"精度",field:"precision",sortable:false},{name:"scale"",align:"left",label:"小数",field:"scale",sortable:false},{name:"autoIncrement",align:"left",label:"自增长",field:"autoIncrement",sortable:false},{name:"nullable",align:"left",label:"空",field:"nullable",sortable:false},{name:"defaultValue",align:"left",label:"默认值",field:"defaultValue",sortable:false},{name:"seqId",align:"left",label:"序号",field:"seqId",sortable:false},{name:"insertable",align:"left",label:"插入",field:"insertable",sortable:false},{name:"updat能够”，对齐：“左”，标签：“编辑”，字段：“可更新”，可排序：假}，{名称：“可查询”，对齐：“左”，标签：“查询”，字段：“可查询”,sortable:false}]字段顺序调整支持四种操作：moveup,movedown,top,bottomonTopClick:function(row){constcolumns=this.table.columns;constindex=columns.findIndex(t=>t.id===row.id);if(index!=0){columns.unshift(columns.splice(index,1)[0]);}},onUpClick:function(row){constcolumns=this.table.columns;constindex=columns.findIndex(t=>t.id===row.id);if(index!=0){columns[index]=columns.splice(index-1,1,columns[index])[0];console.dir（列）；}},onDownClick:function(row){constcolumns=this.table.columns;constindex=columns.findIndex(t=>t.id===row.id);if(index!=columns.length-1){列[索引]=列。拼接（索引+1、1、列[索引]）[0]；}},onBottomClick:function(row){constcolumns=this.table.columns;constindex=columns.findIndex(t=>t.id===row.id);if(index!=columns.length-1){columns.push(columns.splice(index,1)[0]);}}通过列表页、新建页、编辑页的增删改查，实现了动态表单的基本CRUD操作。编辑页面类似于新页面。编辑页面除了可以设置单个字段的索引外，还可以设置多个字段的链接。结合索引，更多内容可以参考源码总结。本文主要介绍元数据中的动态表单设计功能，支持常见的数据类型和索引，进而实现动态表单的CRUD增删改查功能。下一篇文章将介绍数据中元表关系的作用。Demo演示官网地址：https://crudapi.cn测试地址：https://demo.crudapi.cn/crudapi/login附源码地址GitHub地址https://github.com/crudapi/crudapi-admin-webGitee地址https://gitee.com/crudapi/crudapi-admin-web由于网络原因，GitHub可能会比较慢，改访问Gitee即可，代码会同步更新。
