## 概述

    表格视图的列配置js动作，替换当前窗口内容打开其他当前显示布局

## 实现一

1、ecode创建项目发布

```typescript
import ReactDOM from 'react-dom';
import { BrowserRouter ,Route} from 'react-router-dom';

window.ebdfpageListCellAction = (data)=>{
  console.log("data",data)//当前条数据
  const  CorsComponent= weappUi.CorsComponent;
  return  ReactDOM.render(
        <BrowserRouter weId="c76k35">
        <Route weId="zgspuj" path={window.location.pathname}>
          <CorsComponent 
            app="@weapp/ebdfpage"
            compName="EBCardViewPage"
              type="0"   // 0显示  1 新建 2编辑  必填
            idFromParent={data.id} // 数据id :  新建给空，编辑和显示布局必填
            paramsFromParent={{
              objId:'0' //eb表单的表单id  必填
            }}
          />
          </Route>
        </BrowserRouter>,
        document.getElementsByClassName('weapp-appbuilder-view-content')[0], //此次为替换的dom区域，结合实际情况修改
      );
}
```

[图片附件未整合: ../../../../_assets/936544398138671105/001-285b3a01b5.png]

2、自定义列动作

```typescript
 var data = this.data;
window.ebdfpageListCellAction(data);  //方法和上面保持一致
```

[图片附件未整合: ../../../../_assets/936544398138671105/002-cf50690fe8.png]

## 实现二

上面的方案会产生一个问题，无法返回，切换方案如下：

```typescript
import ReactDOM from 'react-dom';
import { BrowserRouter ,Route} from 'react-router-dom';

window.ebdfpageListCellAction = (data)=>{
  console.log("data",data)
  const  CorsComponent= weappUi.CorsComponent;
  const pageDiv = document.createElement('div');
  pageDiv.id ="ebdfpage-view-page-contaniner";
  document.getElementsByClassName('weapp-appbuilder-view-content')[0].append(pageDiv);
  document.getElementsByClassName('weapp-ebdf-tablev-920916214831833131')[0].style.display ="none";
     return  ReactDOM.render(
        <BrowserRouter weId="c76k35">
        <Route weId="zgspuj" path={window.location.pathname}>
          <CorsComponent 
            app="@weapp/ebdfpage"
            compName="EBCardViewPage"
              type="0"   // 0显示  1 新建 2编辑  必填
            idFromParent={data.id} // 数据id :  新建给空，编辑和显示布局必填
            paramsFromParent={{
              objId:'0' //eb表单的表单id  必填
            }}
          />
          </Route>
        </BrowserRouter>,
        document.getElementById('ebdfpage-view-page-contaniner')
      );
}

/**
*  布局上配置自定义按钮，js如下:
*/
//配合销毁插入的dom节点，并显示之前隐藏的dom
//  document.getElementsByClassName('weapp-appbuilder-view-content')[0].removeChild(document.getElementById('ebdfpage-view-page-contaniner'))
 // document.getElementsByClassName('weapp-ebdf-tablev-920916214831833131')[0].style.display ="block";
```
