调整格式后的属性说明表
参数属性配置
此文档是生成页面的方法及属性配置,常用功能在【前端开发】文档上
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
使用方式,下面两种方式二选一实现,如:
以下只是举例属性使用方式
生成的[表.vue]文件中实现
let gridRef;
const onInit=($vm)=>{
gridRef=$vm;
gridRef.columnIndex=true//设置表格显示行号
}
生成的[表.jsx]文件
onInit(){
this.columnIndex=true//设置表格显示行号
}
调整格式后的属性说明表
| 属性 | 说明 | 类型 | 默认 |
|---|---|---|---|
| 自定义扩展页面获取父组件 | 获取生成页面对象,仅在生成 jsx 文件中扩展组件有效 1、通过 this.$emit('parentCall', $parent => { //调用查询 $parent.search() })可以访问父组件ViewGird中的任何属性、方法2、具体也可以参考[前端开发文档->自定义弹出框 ] | - | - |
| 获取自定义扩展页面 | 仅在生成 jsx 文件中扩展组件有效,通过this.$refs.gridHeader/gridBody/gridFooter获取 | - | - |
| tableV2 | 启用高性能表格,解决大批量数据显示或者编辑的性能问题 | bool | false |
| rowHeight | 高性能表格行高度 | number | 37 |
| eventNext | 编辑表单按回车后是否跳转下一个输入框 | bool | true |
| columnIndex | 是否显示行号 | bool | false |
| ck | 是否显示 checkbox | bool | true |
| buttons | 查询界面按钮,具体使用见【前端开发】文档上按钮操作的示例 | array | [] |
| splitButtons | 分割按钮组,用于按钮分组显示 | array | [] |
| boxButtons | 弹出框按钮,具体使用见【前端开发】文档上按钮操作的示例 | array | [] |
| editFormFields | 编辑字段,查看[组件示例->volform 表单组件]配置 | json | - |
| editFormOptions | 编辑配置,查看[组件示例->volform 表单组件]配置 | array | [] |
| searchFormFields | 查询字段,配置规则同编辑字段 | json | - |
| searchFormOptions | 查询配置,配置规则同编辑配置 | array | [] |
| single | 查询界面的 table checkbox 是否单选 | bool | false |
| load | 查询页面打开时是否加载表数据 | bool | true |
| activatedLoad | 页面触发actived时是否刷新页面数据 | bool | false |
| summary | 查询界面table是否显示合计 | bool | false |
| height | 表高度(查询界面的表高度),可在onInited中重新设置值 | number | 0 |
| tableHeight | 查询页面table的高度 | number | 0 |
| tableMaxHeight | 查询页面 table 的最大高度 | number | 0 |
| extraHeight | 表格额外高度,用于计算表格实际高度 | number | 0 |
| boxModel | 新建、编辑框弹出框状态 | bool | false |
| boxInit | 新建或编辑的弹出框初始化状态,默认不做初始化,点击新建或编辑才初始化弹出框 | bool | false |
| closable | 弹出框是否可关闭 | bool | false |
| width | 弹出框查看表数据结构宽度 | number | 700 |
| textInline | table 内容超出后是否不换行 | boolean | true |
| currentAction | 当新建或编辑时,记录当前的状态(如当前操作是新建) | string | Add |
| currentRow | 弹出框编辑的行数据(表格的原始数据) | object | {} |
| currentReadonly | 当前用户没有编辑或新建权限时,表单只读;可用于判断用户是否有编辑或新建权限 | bool | false |
| doubleEdit | 是否开启查询界面表格双击编辑 | bool | false |
| isInited | 初始化状态 | bool | false |
| fixedSearchForm | 是否固定查询表单,true则查询表单将固定显示在表单的最上面 | bool | false |
| action | 增删改查导入导出等对应的action | string | action |
| searchBoxShow | 高级查询弹出框显示状态(界面查询后的下拉框点击触发) | bool | false |
| singleSearch | 快速查询字段 | json | {} |
| exportHref | 导出链接 | string | "" |
| viewModel | 查看表结构的弹出框显示状态 | bool | false |
| viewColumns | 查看表结构的列数据 | array | [] |
| viewColumnsClone | 查看表结构的列数据克隆 | array | [] |
| keyValueType | 键值类型配置 | json | {} |
| remoteKeys | 需要从远程绑定数据源的字典编号;如果字典数据源的查询结果较多,请在onInit中将字典编号添加进来(只对自定sql有效) | array | [] |
| initActivated | 初始化激活状态 | bool | false |
| showDetail | 控制明细表是否显示 | bool | true |
| isMultiple | 是否多明细表 | bool | false |
| showTabs | 一对多明细表是否显示tab标签,false会将明细表从上往下显示 | bool | true |
| orginColumnFields | 原始列字段配置 | array | [] |
| isAuditClick | 是否审批点击 | bool | false |
| full | 编辑弹出框默认是否最大化 | bool | false |
| padding | 是否使用padding间距 | bool | false |
| isCopyClick | 当前是否点击的复制行操作 | bool | false |
| gridRender | 自定义网格渲染配置,示例:gridRender:{h:(h,{})=>{return ""},data:{}} | json | {} |
| dyScript | 动态脚本 | json | {} |
| dyPage | 动态页面 | bool | false |
| defaultFormReadonlyFields | 默认表单只读的字段(审批设置只读与还原的时候需要使用) | array | [] |
| isBoxAudit | 是否弹出框审批 | bool | false |
| auditInited | 审批初始化状态 | bool | false |
| formFieldsType | 表单字段类型 | array | [] |
| workFlowSteps | 工作流步骤 | array | [] |
| pagination | 主表与排序配置{"sizes": [30, 60, 90], //默认分页条大小"size": 30, // 默认分页大小(每页大小)"sortName": '', // 排序字段"order": 'desc' // 排序方式desc或者asc} | - | - |
| boxOptions | 包含弹出框相关配置项{title: '', //弹出框标题saveClose: true, //保存后是否关闭labelWidth: 100, //弹出框编辑表单左边文本标签的宽度height: 0, //弹出框高度,需要在onInited中使用width: 0, //弹出框宽度,需要在onInited中使用draggable: false, //弹出框是否可以拖动modal: true, //弹出框背景遮罩层summary: false, //弹出框明细table是否显示合计} | - | - |
| editor | 编辑器配置信息,示例:editor:{uploadImgUrl:"",upload:null//上传方法} | json | {} |
| upload | 导入上传excel对象,示例:upload:{excel:false,url:"",template:{url:"",fileName:""},init:false} | json | {} |
| auditParam | 审核对象,示例:auditParam:{rows:0,model:false,value:-1,status:-1,reason:"",height:500,showViewButton:true,auditHis:[],showAction:false,data:[{text:"通过",value:1}]} | json | {} |
| queryFields | 查询按钮前面显示多个查询字段(默认只显示一个查询字段),具体使用见【前端开发方】->【设置多个快捷查询字段】 | Array | [] |
| showTableAudit | 是否显示表格[流程]列(隐藏表格里面的审批流程列) | bool | true |
| rowKey | 树形结构的主键字段,如果设置值默认会开启树形 table;注意 rowKey 字段的值必须是唯一(2021.05.02) | string | - |
| labelWidth | 高级查询的标签宽度 | number | 90 |
| reserveSelection | 分页或者刷新表格数据后是否保留复选框选择状态(2024.09.10) | boolean | false |
| sortable | 表格是否可以拖拽排序(2024.10.06) | boolean | false |
| showCustom | 是否显示自定义配置列按钮 | bool | true |
| showCustomSearch | 是否显示自定义搜索按钮 | bool | true |
| maxBtnLength | 界面按钮最多显示的个数,超过的数量都显示在更多中 | number | 8 |
| dicKeys | 当前界面所有的下拉框字典编号及数据源 | array | [] |
| url | 查询界面调用的 url 接口,如需修改请在onInited中重新设置值 | string | '' |
| hasDetail | 是否显示明细表 | bool | false |
| continueAdd | 新建时是否可以连续新建操作(2021.04.11) | bool | false |
| continueAddName | 连续新建的按钮名称(2021.04.11) | string | 保存后继续添加 |
| downloadFileName | 自定义导出文件名(2022.09.26) | null | null |
| newTabEdit | 新窗口编辑 | bool | false |
| select2Count | 下拉框超出指定数量时显示 select2 组件 | number | 1500 |
| beginEdit | 主表表格点击行编辑时方法 | Function | (row, column, index) => { return true } |
| endEditBefore | 主表表格行结束编辑时方法 | Function | (row, column, index) => { return true } |
| detailHeight | 明细表的高度 | number | 300 |
| hiddenFields | 隐藏字段 | Array | [] |
| text | 按钮前面显示的文本(可使用 html 标签) | string | '' |
| subDetails | 三级明细表 | Array | [] |
| lazy | 树形表格是否默认延迟加载,具体配置见【前端开发】->【table树形结构】 | boolean | true |
| defaultExpandAll | 树形表格是否展开所有节点 | boolean | false |
| expandRowKeys | 树形表格默认展开的节点 | Array | [] |
| rowParentField | 树形表格父级 id | string | '' |
| paginationHide | 是否隐藏分页 | boolean | false |
| importDesc | 导入 excel 弹出框的描述文本 | string | '' |
| multiple | 包含多明细表相关配置项 | { horizontal: false, leftWidth: 0, rightWidth: 0 } | { horizontal: false, leftWidth: 0, rightWidth: 0 } |
| dragPosition | 表格可拖动位置,顶部拖动填top、底部拖动填bottom | string | '' |
| labelPosition | 编辑表单标签文字显示位置:left / top(默认是 top,也可在 main.js 全局配置) | string | '' |
| submitChangeRows | 只提交变更的明细表数据 | boolean | true |
| detailOptions | 弹出框明细表配置,见【明细表 detailOptions 参数】{tableV2: false, //启用高性能表格rowHeight: 37, //高性能表格行高度columnIndex: false, //明细是否显示行号ck: true, //明细是否显示checkboxsortable: false, //表格是否可以拖拽排序,见[detailSortEnd明细表拖动排序]pagination:{}, //明细表分页与排序配置,见上方pagination属性height: 0, //明细表表格高度single: false, //明细表是否单选paginationHide: false, //明细表隐藏分页dragPosition: '', //明细表格可拖动位置buttons:[], //明细表按钮,见[前端开发->自定义按钮]cnName: '', //明细表表名key: '', //从表主键名data: [], //数据源columns: [], //明细表表格配置edit: true, //明细是否可以编辑load: false, //弹出框打开时默认加载明细表数据delKeys: [], //明细表删除数据的主键url: '', //从表加载数据的urltextInline: true, //明细表内容超出换行显示doubleEdit: true, //使用双击编辑clickEdit: false, //是否开启点击单元格编辑beginEdit:()=>{}, //明细表点击行编辑时方法,见[动态设置明细表是否可以编辑]endEditBefore:()=>{}, //明细表行结束编辑方法,见[动态设置明细表是否可以编辑]endEditAfter:()=>{}, //明细表行结束编辑后方法} | - | - |
明细表参数 detailOptions
使用方式,如:
1. 在生成的[表.jsx]文件中使用:
onInited(){
this.detailOptions.height=300//设置明细表高度
}
2.在生成的[表.vue]文件中使用:
const onInited=()=>{
gridProxy.detailOptions.height=300//设置明细表高度
}
上面方式二选一都可以实现功能
| 属性 | 说明 | 类型 | 默认 |
|---|---|---|---|
| columnIndex | 明细是否显示行号 | boolean | false |
| ck | 明细是否显示 checkbox | boolean | true |
| sortable | 表格是否可以拖拽排序 2024.10.06 | boolean | false |
| pagination | 明细表分页与排序配置{"sizes": [30, 60, 90], //默认分页条大小"size": 30, // 默认分页大小(每页大小)"sortName": '', // 排序字段"order": 'desc' // 排序方式desc或者asc} | ||
| height | 明细表高度 | number | 0 |
| single | 明细表是否单选 | boolean | false |
| paginationHide | 明细表隐藏分页 | boolean | false |
| dragPosition | 明细表格可拖动位置,顶部拖动 top, 底部 bottom | string | '' |
| buttons | 弹出框从表表格操作按钮 | Array | [] |
| cnName | 从表名称 | string | '' |
| key | 从表主键名 | string | '' |
| data | 数据源 | Array | [] |
| columns | 从表列信息 查看[组件示例->voltable 表格组件]配置 | Array | [] |
| load | 默认是否加载明细表数据 | boolean | false |
| delKeys | 当编辑时删除当前明细的行主键值 | Array | [] |
| url | 从表加载数据的 url | string | '' |
| textInline | 明细表行内容显示在一行上,如果需要换行显示,请设置为 false | boolean | true |
| beginEdit | 明细表点击行编辑时方法 | Function | (row, column, index) => { return true } |
| endEditBefore | 明细表行结束编辑时方法 | Function | (row, column, index) => { return true } |
| endEditAfter | 明细表行结束编辑后方法 | Function | (row, column, index) => { return true } |
| tableV2 | 启用高性能表格(解决大批量数据显示或者编辑) | boolean | false |
| rowHeight | 高性能表格行高度 | number | 37 |
| edit | 明细是否可以编辑 | boolean | true |
| doubleEdit | 使用双击编辑 | boolean | true |
| clickEdit | 是否开启点击单元格编辑,点击其他行时结束编辑 | boolean | false |
表格显示行号
const onInited = () => {
gridRef.columnIndex = true; //设置表格显示行号
};
表格显示 checkbox
const onInited = () => {
gridRef.ck = true; //设置表格显示checkbox
};
设置查询界面按钮
const onInited = () => {
gridRef.buttons = [
/* 按钮配置数组,具体参考【前端开发】文档 */
]; //设置查询界面按钮
};
表格、弹出框按钮
见前端开发文档上自定义按钮;
设置 table checkbox 单选
const onInited = () => {
gridRef.single = true; //设置查询界面的table checkbox单选
};
查询页面默认不加载载数据
const onInited = () => {
gridRef.load = true; //设置查询页面打开时加载表数据
};
设置表格高度、最大高度
const onInited = () => {
//表格高度
gridRef.height = 500; //或者计算已有高度gridRef.height-200;
//设置表格最大高度
gridRef.tableMaxHeight = 500; //或者计算已有高度gridRef.height-200;
};
表格超出换行显示
const onInited = () => {
gridRef.textInline = false; //设置table内容超出后不换行
};
表格排序与分页
const onInited = () => {
gridRef.pagination = {
sizes: [30, 60, 90], //分页列表
size: 30, //分页大小
sortName: "", //排序字段
order: "desc", //排序方式:desc、asc
}; //设置主表与排序配置
};
编辑弹出框高度、宽度
const onInited = () => {
//设置编辑弹出框高度
gridRef.boxOptions.height = 400;
//设置编辑弹出框宽度
gridRef.boxOptions.width = 400;
};
表格显示[流程]列
const onInited = () => {
gridRef.showTableAudit = false; //隐藏表格[流程]列
};
查询界面按钮显示数量
const onInited = () => {
gridRef.maxBtnLength = 8; //设置界面按钮最多显示的个数
};
设置查询界面调用的 url 接口
const onInited = () => {
gridRef.url = "/* 具体接口地址 */"; //设置查询界面调用的url接口
};
显示、隐藏明细表
const onInited = () => {
gridRef.hasDetail = false; //设置隐藏明细表
//也可以写在弹出框打开后台方法动态控制隐藏显示
};
设置明细表的高度
const onInited = () => {
gridRef.detailOptions.height = 300; //设置明细表的高度(是主从明细表,不是一对多)
};
隐藏表格分页
const onInited = () => {
gridRef.paginationHide = true; //设置隐藏分页
};
编辑表单标签文字显示位置
const onInited = () => {
gridRef.labelPosition = "left"; //设置编辑表单标签文字显示位置:left / top
};
弹出框明细表配置
const onInited=()=>{
//弹出框明细表配置
gridRef.detailOptions={
columnIndex:false,//明细表显示行号
ck: true,//明细表显示checkbox复选框
height: 0,//明细表高度
single: false,//明细表单选
paginationHide: false,//明细表隐藏分页
cnName: '',//明细表名字
columns: [],//明细表格配置
textInline: false,//明细表超出换行显示
pagination:{
"sizes": [30, 60, 90],//明细表分页列表
"size": 30,//明细表分页大小
"sortName": '',//明细表排序字段
"order": 'desc'//明细表排序方式:desc/asc
};
};
}
明细表行编辑开始、结束方法
const onInited = () => {
//设置明细表点击行编辑时方法
gridRef.detailOptions.beginEdit = (row, column, index) => {
return true;
};
//设置明细表行结束编辑时方法
gridRef.detailOptions.endEditBefore = (row, column, index) => {
return true;
};
};
