<!-- source: https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/repository/b7c818b1-9132-46a7-bfaf-78fc6747791a/doc/264935434985930752 -->

- 左树右表格
  
     页面整体用 左边栏属性 （左侧可收缩，不需要则不用）左侧树和右侧详情都使用容器包裹
  
  ![image.png](../_assets/264935434985930752/001-c820fdb2ae.png)
  
  树组件标准宽度为240px（将左边栏宽度拖拽成240，这里默认是200）
- ![image.png](../_assets/264935434985930752/002-400be6f15d.png)
- ![image.png](../_assets/264935434985930752/003-00d9a99650.png)
  
  参考设置方案
- ![image.png](../_assets/264935434985930752/004-8540ecedd0.png)
  
  项目任务树组件加载第一个二开方案，粘贴至页面代码块中并替换pageId和compId后生效（使用本方案将同时调整项目任务树基本的二开样式）

```javascript
// config {delay: 200} 延迟200ms轮询查
window.sjrProjectSDK.projectTaskTreeLoadClickFirst(pageId,compId, config)
```

- 去除阴影和圆角的配置方法
- ![image.png](../_assets/264935434985930752/005-2efd441f11.png)
  
  - 左侧树容器配置
  
  让左右高度相同的配置（容器设置自动撑开、选用相同的溢出为auto的方案）

![image.png](../_assets/264935434985930752/006-ee03c2503e.png)

- 中间内容容器配置

让左右高度相同的配置（同上）

![image.png](../_assets/264935434985930752/007-db8ebf6ae7.png)

表格设置-如果标题和按钮没有在同一位置，找 按钮和搜索合并到标题的属性（如果没有改属性，需要重新拖新的列表配置，就有，老的搭建的没有）

![image.png](../_assets/264935434985930752/008-4710ba61da.png)

左侧项目树任务树组件配置参考（EB项目搭建字段配置建议）[https://weapp.eteams.cn/build/techdoc/wdoc/index.html#view/265623892880523264](https://weapp.eteams.cn/build/techdoc/wdoc/index.html#view/265623892880523264)

涉及右边表格带新建按钮类似的需要预制参数的配置方式

以项目树任务树为例

单击每条数据

![image.png](../_assets/264935434985930752/009-2559958c94.png)

配置单击动作，传对应条件

![image.png](../_assets/264935434985930752/010-7d9a480c33.png)

```javascript
//该js用于按钮的预制条件
var projId = this.data.id;
let setPageCompParams = window.sjrProjectSDK.setPageCompParams
setPageCompParams('pageId',{projId: projId})
```

![image.png](../_assets/264935434985930752/011-c1c2759105.png)

列表参数获取，即可绑定左侧树和点击和右侧新建的关系绑定

左侧可收缩区域样式优化代码块

```css
/* 去除左侧树右边线 */
.weapp-ebpv-layout.shrinkable .weapp-ebpv-gl-ls{
  border-right: none;
}
/* 收缩按钮贴边 */
.weapp-ebpv-layout.shrinkable .weapp-ebpv-gl-ls>div{
  width: 100%!important;
}
/* 开启标题后 表格边距 */
.ebcoms-table-com.mergeheaderenable{
  margin: var(--ebproject-page-table-mergeheader-margin);
  width: var(--ebproject-page-table-mergeheader-width);
}
.ui-table-grid thead.ui-table-grid-thead tr .ui-table-grid-th:not([colspan]){
  border-color: var(--ebproject-page-table-header-border-color)!important;
}
/* 表格头部背景色 */
.ebcoms-table-com .ebcoms-container .ui-table-grid-thead{
  background-color: var(--ebproject-page-table-header-bg-color);
}
```

```css
  /* 开启标题后列表外边框间隔 */
  --ebproject-page-table-mergeheader-margin: 0 16px;
  /* 开启标题后列表宽度 */
  --ebproject-page-table-mergeheader-width: calc(100% - 32px);
  /* 开启标题后列表头部边框线颜色 */
  --ebproject-page-table-header-border-color: #D8DFE9;
  /* 开启标题后列表头部背景色 */
  --ebproject-page-table-header-bg-color: #F7F9FC;
```

**出现右边内容布局，会刷新两次 解决方案**：

1、右侧容器 在事件 加载完成前，给一个初始化 查询条件，查出来为空的数据。

原理：初始化查询条件时，给一个-1，查询为空，等左侧树点击后，触发右侧正确查询条件，如果不为空，则会查带不带过滤条件的所有数据，导致异常导致刷新两次

```javascript
/*
pageId 页面id
compId 组件id
initParams 初始话数据 eg: {demo:'-1'},
📢： 这里里面的数据要和 列表数据过滤的条件key一致， 
举例：下面的数据过滤是projId ,这个的参数 就是 {proj:'-1'}
*/
window.sjrProjectSDK.addCompInitParams(pageId,compId, initParams)
```

![image.png](../_assets/264935434985930752/012-490b91c3bb.png)
