Grid：实用的网格/表格(Grid/Table)控件

基础表格组件-EhGrid 平台表格组件 #API #属性 参数 说明 类型 可选值 默认值 id 表格的 id 属性 必填 string '' dataSource 表格数据来源配置 object/array[object] 必填 [] grid 表格展示相关的属性配置 object 必填 （default grid） options 表格的其他属性配置 object - （default options） table-collapse 是否通过点击表格标题收缩表格 boolean - false #回调事件 事件 说明 参数 selection-change 选择行的数据时发出，可以通过传入这个方法获取当前选中行 selected-rows：当前选中行数组 cell-click 单击单元格时发出 row, column, cell, event：选中行，选中列，点击单元格，点击事件 data-change 每次表格数据查询数据后发出 data：当前获取的表格数据 expand-row-click 与扩展表格配合使用，点击扩展表格的行后发出 row, column, event：选中行，选中列，点击事件 #实例方法 事件 说明 参数 返回值 doSearch / bindGrid 触发表格重新加载数据的操作 - 加载表格数据 的 Promise，成功结果的参数是 tabledata openExport 打开导出 excel 的模态框 - - clearSelection 清除表格选中状态 - - tableInstanceMethods 去调用对应 element 的 table 实例方法 functionName：需要调用的方法名， ...methodArg：需要传入方法的参数项 - #插槽 toolbar：写入按钮组的内容，将按钮放置在顶部按钮区域，样式功能等需自己完善。 #使用详解 #dataSource (Object | Array 必填) 示例： // template: <eh-grid :dataSource="dataSource"></eh-grid> //或 <eh-grid :data-source="dataSource"></eh-grid> ... // script => data : <script> ... data(){ return { dataSource: { // formdata参数：控制器名 (string 必填) bean: "mbbBdMrlController", // formdata参数：方法名 (string 必填) method: "select", // formdata参数：entity (string 必填) entity: "com.epichust.entity.MbbBdMrl", // 使用此方法代替bean与method作为请求方法（string 可选） request:'mbbBdMrlController!select.m', // 请求url参数 （Object 可选） params: { id : 123 }, // 配置过滤选项 (Array<Object>) filters: [ { field: "id", // 字段名 compare: "cn,ge", // 比较方式（多个以逗号分隔） data: "", // 值 type: "text" // 输入框类型（text、input、select、date、time、datetime） options:{ // 新增select类型，将模板查询输入改为选择框，可将EhSelect的传入属性作为该配置对象的属性。例如keyName、valueName等。 }, }, { field: "code", compare: "cn,eq", data: "", } ], // 是否首次自动加载数据 loadDataOnFirst: true, // 数据请求方法实例 (Function<promise> 可忽略) serviceInstance: null, // 默认过滤字段 (Array | Object 可忽略) serviceInstanceInputParameters: null } // 特殊情况下，如果将dataSource赋值为数组类型的数据，表格将直接以传入的数组作为数据源！！ } } </script> #grid (Object 必填) 表格展示相关的属性配置 默认配置 / 示例： // template: <eh-grid :grid="grid"></eh-grid> ... // script => data : <script> ... data(){ return { // element table 大部分属性都可以应用于此 grid: { // 表格标题 title:"", // 表格描述文字 description:"", // required 展示的列名配置 columns: [ // el-table-column Attributes（详细属性在ele官网） // { name, refEntity, refName } // { // label, 表头 // prop, 列名 // isKey, 是否是主键 默认 true（要求是唯一值） // visible, 是否显示 默认 true // pass, 忽略发送该列名 默认 false // exportHideen, 是否导出时隐藏此列 默认 false // align, 居中 默认 'left' // formatter,width,minWidth,... } ], // 没有默认排序 defaultSort: { // prop: "id", // order: "ascending" }, // required 分页组件属性 pagination: { pageSize: 10, // 页容量 // currentPage: 1, pageSizes: [10, 20, 50, 100]，// 页容量选项 }, // 出现表格框，且列可拉伸 border: true, size: "small", // 默认高度占据大半可视高度 // height: '', // 单位px，支持百分比高度，如：50% // rows:10, // page:1, // 最大高度，针对滚动条 maxHeight: "440px", //document.documentElement.clientHeight - 270, // 是否显示分页 pageable: true, // reduceMethod 待定 // reduceMethod: null, // 确定行是否被选择，结果取决于方法返回值 function selectable: null, // 是否支持列表项选中功能 mutiSelect: true, // 是否显示行号 showRowNumber: true, // 是否显示列名编辑 showColSetting: true, // 自定义数据列 // customColumnDataHeader: false, operates: { type: Object, default: { // width:按钮列宽 （200px）， // fixed：是否固定（right）, // list:按钮集合[] = // <{ // label: 按钮文字， // render: Function(key,row) 按钮文字渲染方法，如果存在这个方法，则label失效 // type :类型（primary / success / warning / danger / info / text）， // style：Object 按钮样式， // icon：按钮图标， // disabled：是否禁用， // method：Function(key,row) 回调方法 // }> } }, // 是否可导出表格excel export: false, // 最大选择行数，默认1000，过多会顶替掉最开始选中的。 selectMax: 1000, // Number // 行选择框，操作按钮是否禁用 disabled: false, // 是否展示可伸缩grid sortable: true, // 表格所有的列是否可排序。（单个列在columns中单独设置） collapse: false, // collapse若为true，则配置此项，在折叠状态下标题可展示的字段。默认空。 collapseField: [], // ["code","date"] // 扩展行表格所展示的字段，类似columns，包含element列所有属性 expandColumns:[] // [{ prop:"name", label:"名称", width:"180px"}] // 加载扩展表格数据的方法 // 默认参数，row: 当前选择行，expandRows：所有已经展开的行数据，resolve：数据的回调。 // 展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded loadEexpandData: function(row, expandRows, resolve){ // 使用一个异步请求，通过qs转换formdata参数 return vue.$http.post("sysUserController!getRoleDetail.m", vue.$util.getParamByQs({ nd_: 1591845675402, id: row.id })) .then((res) => { // 请求结果传入resolve 回调函数，即可完成。 resolve(res && res.rows ? res.rows : []); }); }, "row-key": "id", // 必要！扩展表格和树形表格都需要定义此属性。 // 树形表格属性，最好与扩展表格 二选一使用。 "tree-props": { children: "children", hasChildren: "hasChildren" }, // 必要！树形子级属性：children 子级的集合，hasChildren：是否有子级的属性。 lazy: true, // 异步加载时，一般为 true load: (tree, treeNode, resolve) => { // tree：类似row，当前行数据。treeNode：树节点属性。resolve：数据的回调。 return vue.$http.post("sysUserController!getRoleDetail.m").then((res) => { // 请求结果传入resolve 回调函数，即可完成。 resolve(res && res.rows ? res.rows : []); }); }, // 是否显示手动上下排序按钮 sortButton: false, // 是否手动拖拽表格行 进行排序。若要保持选择行状态，需指定row-key !! manualSort: false, // 是否显示表格刷新按钮，默认显示 refreshBtn: true, // 当行选中时，选中行上添加的className highlightRowClass: '' // 未填时，选中没有新增任何class // 动态浮动表格滚动条 floatScroll: true, } } } </script> #options (Object 非必填) 表格的其他的一些属性配置 默认配置 / 示例： // template: <eh-grid :options="options"></eh-grid> ... // script => data : <script> ... data(){ return { options: { // 是否显示编辑过滤 showFilterTemplate: true， // 表格请求formdata参数 超时时间戳 （不传则自动计算后一分钟） nd: 1587624065070, // 表格请求formdata参数 search search: false, // 表格请求formdata参数 带总量查询 usetotal: true, // 额外参数字段：其中的属性会带入请求方法的 formdata中。 // 重要：如果要使用这个功能，需事先把 extraParamFields 定义好，哪怕是个空对象 {} extraParamFields: { // consition: '8a5aya54a5t4t43453thf4' filters: [ // 额外过滤条件，如果有值，则使用这个额外的过滤条件，数据写法与datasource中的filters一致。 { compare: "cn", data: "myName", field: "loginName" }, // 此三个属性值必填 ] }, // 在extraParamFields存在的情况下，extraParamMerged属性为true，则是额外过滤条件合并查询模板的过滤条件 extraParamMerged: false } } } </script> #selection-change (Function) 通过传入这个方法获取 当前选择行的数据 示例： <eh-grid @selection-change="getRow"></eh-grid> ... <script> ... methods: { getRow(row){ console.log(row) // 选其中一行会打印：[{"siteName":"车桥机加工厂","id":"123","code":"TESTCODE"}] } } </script> #tableInstanceMethods (Function : 未知) 传参：functionName (string) 需要调用的方法名。 后续传参：methodArg (参数项) 需要传入方法的参数项。 调用这个实例方法，实际去调用对应 element 的 table 实例方法。(el-table 的实例方法在 element 官方文档中查看) 示例： <eh-grid id="grid123" ref="grid123"></eh-grid> ... <script> ... methods: { // 这里我让第一行表格处于传中状态 selectRows(){ // 取值表格第一行的数据 let firstRow = this.$refs.grid123.data[0]; // 调用表格实例方法 toggleRowSelection，并传入必要的参数 this.$refs.grid123.tableInstanceMethods('toggleRowSelection', firstRow, true) } } </script> #使用插槽 #toolbar <eh-grid id="grid123" ref="grid123"> <template slot="toolbar"> <el-button @click="refresh">刷新</el-button> <el-button type="primary" @click="save">保存</el-button> </template> </eh-grid> ... <script> ... methods: { refresh(){ this.$refs.grid123.bindGrid() // 刷新了表格gird123的数据 } } </script> 这个是eh-grid的文档