基础表格组件
-EhGrid
平台表格组件
#API
#属性
参数 说明 类型 可选值 默认值
id 表格的 id 属性 必填 string ''
dataSource 表格数据来源配置 object/array[object] 必填 []
grid 表格展示相关的属性配置 object 必填 （default grid）
options 表格的其他属性配置 object
- （default options）
table-collapse 是否通过点击表格标题收缩表格 boolean
- false
#回调事件
事件 说明 参数
s
election
-change
选择行的数据时发出，可以通过传入这个方法获取当前选中行 s
elected
-rows：当前选中行数组
c
ell
-click 单击单元格时发出 row,
column, c
ell, event：选中行，选中列，点击单元格，点击事件
data
-change 每次表格数据查询数据后发出 data：当前获取的表格数据
expand
-row
-click 与扩展表格配合使用，点击扩展表格的行后发出 row,
column, event：选中行，选中列，点击事件
#实例方法
事件 说明 参数 返回值
doSearch / bindGrid 触发表格重新加载数据的操作
- 加载表格数据 的 Promise，成功结果的参数是
tabledata
openExport 打开导出 exc
el 的模态框
- -
clearS
election 清除表格选中状态
- -
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: "s
elect",
// formdata参数：entity (string 必填)
entity: "com.epichust.entity.MbbBdMrl",
// 使用此方法代替bean与method作为请求方法（string 可选）
request:'mbbBdMrlController!s
elect.m',
// 请求url参数 （Object 可选）
params: { id : 123 },
// 配置过滤选项 (Array<Object>)
filters: [
{
fi
eld: "id", //
字段名
compare: "cn,ge", // 比较方式（多个以逗号分隔）
data: "", // 值
type: "text" // 输入框类型（text、input、s
elect、date、time、datetime）
options:{
// 新增s
elect类型，将模板查询输入改为
选择框，可将EhS
elect的传入属性作为该配置对象的属性。例如keyName、valueName等。
},
},
{
fi
eld: "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 }
// {
// lab
el, 表头
// 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.document
Element.clientHeight
- 270,
// 是否显示分页
pageable: true,
// reduceMethod 待定
// reduceMethod: null,
// 确定行是否被
选择，结果取决于方法返回值 function
s
elec
table: null,
// 是否支持列表项选中功能
mutiS
elect: true,
// 是否显示行号
showRowNumber: true,
// 是否显示列名编辑
showColSetting: true,
//
自定义数据列
// custom
ColumnDataHeader: false,
operates: {
type: Object,
default: {
// width:按钮列宽 （200px），
// fixed：是否固定（right）,
// list:按钮集合[] =
// <{
// lab
el: 按钮文字，
// render: Function(key,row) 按钮文字渲染方法，如果存在这个方法，则lab
el失效
// type :类型（primary / success / warning / danger / info / text），
// style：Object 按钮样式，
// icon：按钮图标，
// disabled：是否禁用，
// method：Function(key,row) 回调方法
// }>
}
},
// 是否可导出表格exc
el
export: false,
// 最大
选择行数，默认1000，过多会顶替掉最开始选中的。
s
electMax: 1000, // Number
// 行
选择框，操作按钮是否禁用
disabled: false,
// 是否展示可伸缩grid
sor
table: true, // 表格所有的列是否可排序。（单个列在
columns中单独设置）
collapse: false,
// collapse若为true，则配置此项，在折叠状态下标题可展示的
字段。默认空。
collapseFi
eld: [], // ["code","date"]
// 扩展行表格所展示的
字段，类似
columns，包含
element列所有属性
expand
Columns:[] // [{ prop:"name", lab
el:"名称", 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", has
Children: "has
Children" }, // 必要！树形子级属性：
children 子级的集合，has
Children：是否有子级的属性。
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中。
// 重要：如果要使用这个功能，需事先把 extraParamFi
elds 定义好，哪怕是个空对象 {}
extraParamFi
elds: {
// consition: '8a5aya54a5t4t43453thf4'
filters: [ // 额外过滤条件，如果有值，则使用这个额外的过滤条件，数据写法与datasource中的filters一致。
{ compare: "cn", data: "myName", fi
eld: "loginName" }, // 此三个属性值必填
]
},
// 在extraParamFi
elds存在的情况下，extraParamMerged属性为true，则是额外过滤条件合并查询模板的过滤条件
extraParamMerged: false
}
}
}
</script>
#s
election
-change (Function)
通过传入这个方法获取 当前
选择行的数据
示例：
<eh
-grid @s
election
-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: {
// 这里我让第一行表格处于传中状态
s
electRows(){
// 取值表格第一行的数据
let firstRow = this.$refs.grid123.data[0];
// 调用表格实例方法 toggleRowS
election，并传入必要的参数
this.$refs.grid123.
tableInstanceMethods('toggleRowS
election', 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的文档
本文介绍了如何在Vue项目中使用el-tree组件和el-table组件，实现用户自定义选择表格显示字段的功能。通过el-tree展示字段列表，用户选择后在el-table中动态渲染，提供灵活的前端界面定制能力。
扫一扫
4379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
