2つのコンポーネント値が別のコンポーネントの状態を制御します

JS 动作面板 - 前端代码开发 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效的。2. ...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

1.ケース背景

1つのコンポーネントの関連オプション設定でビジネスのニーズを満たすことができない場合、複数のコンポーネントが同時にある条件を満たす必要がある場合に別のコンポーネントを表示するには、次のケースを参照してください。

2.効果を実現する

💡ドロップダウンラジオaがオプション1を選択し、ドロップダウンラジオbがオプション2を選択すると、1行のテキストcが表示されます

3.実現手順

3.1フォームとコンポーネント構成の作成

3.1.1フォームの作成

パス: 作成したアプリケーションに入る>> ページの左上隅に + 番号>> 新規に通常のフォーム/プロセスフォームを作成します (フォームタイプを選択してください)

フォームの作成

3.1.2コンポーネントタイプと構成

ドロップダウンラジオa: ドロップダウンラジオ

ドロップダウンラジオb: ドロップダウンラジオ

単一行テキストc: 単一行テキスト

3.1.3単一行テキストcステータスを非表示に設定する

1行のテキストcステータスを非表示に設定します

3.2ページjs設定

3.2.1ドロップダウンラジオaにonchangeアクションを新規作成する

ドロップダウンラジオa新規onchangeアクション

3.2.2 onchangeアクション内に次のコードを書き込みます

コード例:

  const a = this.$("下拉单选A的唯一标识").getValue();
  const b = this.$("下拉单选B的唯一标识").getValue();

  
  if (a == "选项一" && b == "选项二" )
  {
    this.$("单行文本C的唯一标识").setBehavior("NORMAL")
  }
  else
  {
    this.$("单行文本C的唯一标识").setBehavior("HIDDEN")
  }

3.2.3ドロップダウンラジオbでこのonchangeアクションをバインドする

注: 2つのドロップダウン・ラジオは同じアクションをバインドしています

ドロップダウンラジオb新規作成onchangeアクション

5.エフェクトデモ

次のようにして、3つの異なる効果を実現します

1. ドロップダウンラジオaは「オプション1」、ドロップダウンラジオbは「オプション3」を選択し、1行のテキストは表示されません
2. ドロップダウンラジオaで「オプション1」、ドロップダウンラジオbで「オプション2」を選択すると、1行のテキストが表示されます
3. ドロップダウンラジオbは「オプション2」を「オプション3」に変更し、1行のテキストは非表示にします

-------------------- 最新情報を入手して、私たちに注目してください -------------------- ----