标签：Vue false name Quasar align label sortable SPA columns
基于Vue和Quasar的前端SPA项目实战之动态表单（五）
回顾
通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之序列号（四）的介绍，我们已经完成了元数据中序列号的增删改查，本文主要介绍动态表单设计功能的实现。
简介
在crudapi系统中，所有的业务表单都是通过配置动态生成的，代码无需写死，有关基本概念参考之前文章 元数据管理—动态表单设计器在crudapi系统中完整实现 ，表单配置好之后，对应的crud接口就自动生成了。
UI界面
表单列表
创建表单
索引管理
API
表单API包括基本的CRUD操作，具体的通过swagger文档可以查看。通过axios封装api，名称为metadataTable
import { axiosInstance } from "boot/axios";const metadataTable = {
create: function(data) {return axiosInstance.post("/api/metadata/tables", data);
},
update: function(id, data) {return axiosInstance.patch("/api/metadata/tables/" + id, data);
},
list: function(page, rowsPerPage, search, query) {if (!page) { page = 1}if (!rowsPerPage) { rowsPerPage = 10}return axiosInstance.get("/api/metadata/tables", {params: { offset: (page - 1) * rowsPerPage, limit: rowsPerPage, search: search, ...query}//permission: ["ROLE_META_TABLE_R"] });
},
count: function(search, query) {return axiosInstance.get("/api/metadata/tables/count", {params: { search: search, ...query} });
},
get: function(id) {return axiosInstance.get("/api/metadata/tables/" + id, {params: {} });
},
getByName: function(name) {return axiosInstance.get("/api/metadata/tables/name/" + name, {params: {} });
},
delete: function(id) {return axiosInstance.delete("/api/metadata/tables/" + id);
},
batchDelete: function(ids) {return axiosInstance.delete("/api/metadata/tables", {data: ids});
}};export { metadataTable };核心代码
q-table控件
表单设计页面用到了q-table控件，每一个字段对应一个行，
<q-table:data="table.columns":columns="columns":visible-columns="visibleColumns":pagination.sync="tablePagination"row-key="id"selection="multiple":selected.sync="selected":loading="loading"flat separator="cell"hide-bottom></q-table>
columns定义
columns定义了q-table的列属性，涵盖表单的全部属性，比如名称，是否为一，数据类型，长度等。
columns: [
{name: "dataClickAction",align: "center",label: "操作",field: "dataClickAction",sortable: false
},
{name: "displayOrder",align: "left",label: "顺序",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: "描述",field: "description",sortable: false
}, {name: "unsigned",align: "left",label: "无符号",field: "unsigned",sortable: false
}, {name: "dataType",align: "left",label: "数据类型",field: "dataType",sortable: false
}, {name: "indexType",align: "left",label: "索引类型",field: "indexType",sortable: false
}, {name: "indexStorage",align: "left",label: "索引存储",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: "updatable",align: "left",label: "编辑",field: "updatable",sortable: false
}, {name: "queryable",align: "left",label: "查询",field: "queryable",sortable: false
}]字段顺序调整
支持上移，下移，置顶，置底四种操作。
onTopClick: function(row) {
const columns = this.table.columns;
const index = columns.findIndex(t => t.id === row.id);
if (index != 0){columns.unshift(columns.splice(index, 1)[0]);}},onUpClick: function(row) {
const columns = this.table.columns;
const index = columns.findIndex(t => t.id === row.id);
if (index != 0){columns[index] = columns.splice(index - 1, 1, columns[index])[0];console.dir(columns);}},onDownClick: function(row) {
const columns = this.table.columns;
const index = columns.findIndex(t => t.id === row.id);
if (index != columns.length - 1){columns[index] = columns.splice(index + 1, 1, columns[index])[0];
}},onBottomClick: function(row) {
const columns = this.table.columns;
const index = columns.findIndex(t => t.id === row.id);
if (index != columns.length - 1){columns.push(columns.splice(index, 1)[0]);
}}增删改查
通过列表页面，新建页面和编辑页面实现了动态表单基本的crud操作，其中编辑和新建页面类似，编辑页面除了可以设置单个字段的索引，还可以设置多个字段的联合索引，更多内容参考源码即可。
小结
本文主要介绍了元数据中动态表单设计功能，支持常见的数据类型和索引，然后实现了动态表单的crud增删改查功能，下一篇文章会介绍元数据中表关系功能。
标签：Vue,false,name,Quasar,align,label,sortable,SPA,columns 来源： https://blog.51cto.com/15149911/2690366
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。