基础表格组件-Eh
Grid
平台表格组件
#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 / bind
Grid 触发表格重新加载数据的操作 - 加载表格数据 的 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,
// 是否显示行号
show
RowNumber: 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: 当前选择行，expand
Rows：所有已经展开的行数据，resolve：数据的回调。
// 展开行时，回调的第二个参数为 expanded
Rows；树形表格时第二参数为 expanded
loadEexpandData: function(
row, expand
Rows, 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
highlight
RowClass: '' // 未填时，选中没有新增任何class
// 动态浮动表格滚动条
floatScroll: true,
}
}
}
</script>
#options (Object 非必填)
表格的其他的一些属性配置
默认配置 /
示例：
// template:
<eh-
grid :options="options"></eh-
grid>
... // script => data :
<script>
...
data(){
return {
options: {
// 是否显示编辑过滤
show
FilterTemplate: 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="get
Row"></eh-
grid>
...
<script>
...
methods: {
get
Row(
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: {
// 这里我让第一行表格处于传中状态
select
Rows(){
// 取值表格第一行的数据
let first
Row = this.$refs.
grid123.data[0];
// 调用表格实例方法 toggle
RowSelection，并传入必要的参数
this.$refs.
grid123.tableInstanceMethods('toggle
RowSelection', first
Row, 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.bind
Grid()
// 刷新了表格gird123的数据
}
}
</script>
这个是eh-
grid的文档
本文提供了一个详细的KendoUI网格过滤行使用示例，包括如何配置过滤器和展示实例，帮助开发者轻松实现数据筛选功能。
扫一扫
1687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
