## 1、思路

> →拦截按钮数据，自行处理
> 
> →清除默认按钮
> 
> →渲染自定义的菜单按钮组
> 
> →事件接通
> 
> →测试处理

### 1.1 获取按钮数据

> 拦截按钮接口获取到右上角按钮数据，并将右上角相关的按钮数据置空，目的是让列表不再渲染默认按钮，接口如图1

[图片附件未整合: ../../../../_assets/218570496868876288/001-cd1d60fbb6.png]

### 1.2 拦截渲染按钮

**拦截对应表格的**`Title`**组件的**`buttons`**，**`weId`**， 将自定义渲染的内容渲染到Title右侧的 **`buttons`** 区域的位置，并将原本的**`props.buttons`**也拼接进去，因为其中包含高级搜索组件。**

ecode拦截示例

```javascript
weappUtils.regOvProps('weappUi', 'Title', (props) => {
     console.log(props)
 if(props.weId === '_xxxx_1234_qwer_wi9wcf'){ // 建模表格视图右上角渲染的Title组件weId
    const newButtons = [];//自定义渲染的buttons,格式参考公共组件的title的buttons属性
    console.log(props,props.buttons)
    const otherComs = props.buttons;
    const newContent = <>{newButtons}<span>{otherComs}</span></>
    props.buttons = newContent;
 }
  return props;
}, 0)
```

### 1.3 事件接通

按钮的点击事件如下：

```javascript

const onItemClick = (e: React.MouseEvent) => {
  const viewStore = ebdfpageSDK.getListSDK().getListStore(); // 表格视图store
  viewStore.btnsClick(button, button.actions, { ...routerProps, dom: e?.target })(); //注意这里要先执行一次
};
//button 此处为getListButtons中的对应按钮的信息，示例见附录
//routerProps 须包含history,location,match等属性
```

### 1.4 附录

```json
button = {
    "id": "990610322735652864",
    "buttonKey": "",
    "name": "新建带参",
    "showPosition": [
        "lineEnd",
        "rightTop"
    ],
    "hidden": false,
    "onlyIcon": 0,
    "iconPath": "",
    "conditionEnable": 0,
    "conditionId": "0",
    "likeNum": 0,
    "likeInfo": 0,
    "showOrder": 984,
    "conditionData": "",
    "sysParams": "[]",
    "buttonCustomParm": {
        "enableLog": 1
    },
    "operateType": "1",
    "actions": [
        {
            "id": "990610322735652865",
            "deleteType": 0,
            "name": "",
            "datarule": "",
            "conditionTxt": "",
            "url": "{\"openMode\":\"0\",\"paramsRaw\":[{\"nameType\":\"FORMFIELDS\",\"name\":{\"compType\":\"DateComponent\",\"showDetailName\":\"\",\"id\":\"886379356123496448\",\"content\":\"日期区间(开始时间)\"},\"type\":\"fixed\",\"value\":\"2023-12-13\"},{\"nameType\":\"FORMFIELDS\",\"name\":{\"compType\":\"DateComponent\",\"showDetailName\":\"\",\"id\":\"886379356123496449\",\"content\":\"日期区间(结束时间)\"},\"type\":\"fixed\",\"value\":\"2023-12-13\"}],\"name\":\"新建布局(zg230717所有字段)\",\"ownParams\":{\"openSource\":\"button\",\"openSourceId\":\"-1\",\"targetConditionId\":\"990610322735652865\"},\"page\":{\"pageViewType\":\"1\",\"pageType\":\"LAYOUT\",\"openMode\":\"0\",\"appid\":\"846327987424141315\",\"pageId\":\"1/886379175877476352\",\"pageName\":\"新建布局(zg230717所有字段)\",\"parentId\":\"Form_886379175877476352\"},\"params\":[]}",
            "urlType": "0",
            "actionType": "openpage",
            "enable": 1,
            "showOrder": 0,
            "openType": "1",
            "windowSize": 30,
            "interfacePath": "",
            "confirmTitle": "",
            "confirmContent": "",
            "confirmTrue": "",
            "confirmFalse": "",
            "desc": "",
            "ecode": "",
            "enableLog": 0,
            "idStr": "990610322735652865",
            "buttonId": "990610322735652864",
            "interfaceType": "",
            "executeSelectedDatas": 0,
            "fieldAssignType": "[]",
            "dataSource": "2"
        }
    ],
    "content": "新建带参"
}
```

（图1）
