# detailListHeader中给定列头的配置
# 如下所示:
{
title: "浏览按钮", //表头名称
type: 24, //24表示控件类型为系统按钮
field: "llnu", //列的字段名称
compatibilityMode: 'Array', //组件的数据格式,推荐使用Array
tagListDisplayField: "name", //tag最终显示在界面取哪个字段
cptType: "filterable", //filterable表示支持搜索,后续的功能统一使用带有搜索
isCheck: true, //弹框中表格的数据是否可以复选
reversal: true, //表示是否支持翻页之后保存上页的数据勾选状态不变,基于vxe-grid的checkbox-config实现
tableColumn: [ //弹框中的表格列
{ field: "id", title: "ID" },
{ field: "fname", title: "字段名" },
{ field: "lanIDVal", title: "字段显示名" },
{ field: "seqNo", title: "排序" },
]
},
# 接口调用之后,tableData列表中回显
数据结构:数组。 如下所示:
"llnu": [
{
"id": "3333",
"name": "eeeee",
"remark": null,
"seqNo": 3
},
{
"id": "444443",
"name": "rrrrr",
"remark": null,
"seqNo": 4
},
]
# 用于获取弹框中数据的事件 sysBtnDefaultHandleChange
<DetailTable @sysBtnDefaultHandleChange=“sysBtnDefaultHandleChange”></DetailTable>
sysBtnDefaultHandleChange(event, callback, json1, json2) {}
参数1: event,数据如下:
{
"page": {
"currentPage": 1,
"pageSize": 10,
"total": 0
},
"selectKey": ""
},
参数2: callback,是一个回调函数,需要传入以下数据:
其中page是分页,result是表格数据
{
"page": {
"currentPage": 1,
"pageSize": 10,
"total": 0
},
"result": [
{
"id": "11111",
"name": "qqq",
"seqNo": 1
},
{
"id": "22222",
"name": "wwww",
"seqNo": 2
}
]
}
参数3: 一个json对象其中,其有3个字段
| 字段名称 | 描述 | 值 |
|---|---|---|
| configure | 列字段的配置信息 | json对象 |
| fname | 列字段code | 字符串 |
| index | 当行明细表第几行数据 | 数字 |
参数4: 一个json对象其中,其有1个字段(只有用户在输入文字时,这个对象才会存在)
| 字段名称 | 描述 | 值 |
|---|---|---|
| isSysRemoteMethod | 输入检索 | true |
# 用于监听字段数据变化的事件 fieldChangeEvent
@fieldChangeEvent="fieldChangeEvent"
需要被监听的字段列,配合 fieldChangeEvent 事件使用
listenField: ['llnu'],
接收事件的方法如下:
fieldChangeEvent({ field, fieldVal, index}) {}
在下面演示功能中,操作这个功能时,在浏览器控制台中可以看到回传的参数。
| 字段名称 | 描述 | 值 |
|---|---|---|
| field | 字段名称 | 字符串 |
| fieldVal | 用户在弹框中的表格中选择了几行数据 | 对象数组 |
| index | 当行明细表第几行数据 | 数字 |
# 功能演示
代码
mock数据如下所示:
代码