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

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

本文详细介绍了如何在应用管理界面创建和设置自定义页面的操作步骤，包括通过不同入口创建页面、设置页面属性以及使用页面设计器等内容。

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. 在线试玩

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

AI智能体时代，全新宜搭。业务创新，一搭就行。

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