# 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数据如下所示:
代码