调整格式后的属性说明表

参数属性配置

此文档是生成页面的方法及属性配置,常用功能在【前端开发】文档上

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现

使用方式,下面两种方式二选一实现,如:

以下只是举例属性使用方式

生成的[表.vue]文件中实现
let gridRef;
const onInit=($vm)=>{
    gridRef=$vm;
    gridRef.columnIndex=true//设置表格显示行号
}

调整格式后的属性说明表

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

表格显示行号

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;
  };
};
Last Updated 2026/1/24 15:07:43