カスタムページコントロール折りたたみパネル折りたたみ表示

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設定機能

エキスパンデッドキーパラメータには、展開された折りたたみパネルの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