自定义页面控制折叠面板折叠展示

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用场景

本例介绍一下在宜搭自定义页面中如何控制折叠面板折叠展示。

2. 实现功能

2.1 创建自定义页面

2.2 配置折叠面板

（1）开启受限组件选项

（2）添加变量并绑定

（3）绑定事件

export function onExpand(expandedKeys){
  console.log(expandedKeys);
  this.setState({
    expandedKeys,
  });
}

2.3 配置功能

expandedKeys 参数中包含展开的折叠面板的 key，自上而下从 0 开始。第一项：0，第二项：1，第三项：2 ...

（1）全部展开

export function onExpandAll(){
  this.setState({
    expandedKeys: ["0", "1", "2"],
  });
}

（2）全部收起

export function onShrinkAll(){
  this.setState({
    expandedKeys: [],
  });
}

（3）展开 / 收起指定项

// 展开 / 收起指定项，key：展开 / 收起的项，type：expand（展开） shrink（收起）
export function onDesign(key, type) {
  if (!type || !key) { return };
  const { expandedKeys } = this.state;
  const index = expandedKeys.indexOf(key);
  if (index === -1 && type === 'expand') {
    // 展开
    expandedKeys.splice(1, 0, key);
  } else {
    // 收起
    expandedKeys.splice(index, 1);
  }
  this.setState({
    expandedKeys,
  });
}

// 展开第二个
export function onExpandSecond() {
  this.onDesign('1', 'expand');
}

// 收起第二个
export function onShrinkSecond() {
  this.onDesign('1', 'shrink');
}

3. 实现效果

4. 在线试玩

示例中心 | 开发者赋能平台

让企业自建专属应用更简单，持续创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_I7C9SNOI3I62YSIXMS82&from=yuque_subject