Đây là một câu hỏi cũ với nhiều câu trả lời hoạt động, tuy nhiên tôi đã phát hiện ra một giải pháp sử dụng những gì Magento cung cấp (kể từ 2.1.0) mà không cần phải mở rộng các thành phần. Vì nhiều câu hỏi đã được đánh dấu là trùng lặp và được hướng dẫn ở đây, tôi nghĩ sẽ có ích khi cung cấp một số thông tin về tùy chọn này.
Tất cả các thành phần ui thành phần mở rộng Magento_Ui/js/form/element/abstract.jsđều có switcherConfigsẵn một cài đặt cho các mục đích như ẩn / hiển thị các thành phần cũng như các hành động khác. Thành switcherphần có thể được tìm thấy tại Magento_Ui / js / form / switcher cho người tò mò. Bạn có thể tìm thấy các ví dụ về nó đang được sử dụng trong sales_rule_form.xml và catalog_rule_form.xml . Tất nhiên, nếu bạn đang sử dụng thành phần tùy chỉnh của riêng mình, bạn vẫn có thể sử dụng thành phần này miễn là thành phần của bạn cuối cùng sẽ mở rộng abstract, dường như là trường hợp dựa trên mã ví dụ được cung cấp trong câu hỏi.
Bây giờ cho một ví dụ cụ thể hơn để trả lời câu hỏi ban đầu.
Trong Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xmlbạn chỉ cần thêm phần sau vào trường settingskiểm soát (tức là trường xác định trường nào bị ẩn / hiển thị). Trong ví dụ của bạn, điều này sẽ là field1.
<field name="field1">
<argument name="data" xsi:type="array">
...
</argument>
<settings>
<switcherConfig>
<rules>
<rule name="0">
<value>2</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>show</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>hide</callback>
</action>
</actions>
</rule>
<rule name="1">
<value>3</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>hide</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
Hãy phá vỡ nó một chút. Thành switcherphần này chứa một mảng trong rulesđó là những gì chúng ta đang xây dựng ở đây. Mỗi cái <rule>có một tên là một số trong ví dụ này. Tên này là khóa / chỉ mục mảng cho mặt hàng này. Chúng tôi đang sử dụng số làm chỉ mục mảng. Chuỗi cũng nên hoạt động nhưng tôi đã không kiểm tra lý thuyết này .
CẬP NHẬT - Như được đề cập bởi @ChristopheFerreboeuf trong các bình luận, chuỗi không hoạt động ở đây. Đây là các mảng và nên bắt đầu bằng 0, không phải chuỗi hoặc 1.
Bên trong mỗi rulechúng ta vượt qua hai đối số.
value- Đây là giá trị field1sẽ kích hoạt actionsđịnh nghĩa dưới đây.actions- Ở đây chúng tôi có một mảng khác. Đây là những hành động được kích hoạt khi các điều kiện của quy tắc này được đáp ứng. Một lần nữa, actiontên của mỗi chỉ là chỉ mục mảng / khóa của mục đó.
Bây giờ mỗi cái actioncũng có hai đối số (với thứ 3 tùy chọn).
target- Đây là yếu tố bạn muốn thao tác dưới hành động này. Nếu bạn không quen với cách các tên thành phần ui_component được tạo trong Magento, bạn có thể xem bài viết của Alan Storm . Về cơ bản, nó giống như {component_name}.{component_name}.{fieldset_name}.{field_name}trong ví dụ này.callback- Đây là hành động được thực hiện trên các đề cập ở trên target. Cuộc gọi lại này phải là một chức năng có sẵn trên phần tử được nhắm mục tiêu. Ví dụ của chúng tôi sử dụng hidevà show. Đây là nơi bạn có thể bắt đầu mở rộng về chức năng có sẵn. Các catalog_rule_form.xmlví dụ tôi đã đề cập trước đó sử dụng setValidationnếu bạn muốn xem một ví dụ khác.- Bạn cũng có thể thêm
<params>vào bất kỳ actioncuộc gọi nào cho họ. Bạn có thể thấy điều này trong catalog_rule_form.xmlví dụ là tốt.
Cuối cùng mục cuối cùng bên trong switcherConfiglà <enabled>true</enabled>. Điều này khá đơn giản, đó là Boolean để bật / tắt chức năng trình chuyển đổi mà chúng ta vừa thực hiện.
Và chúng ta đã hoàn thành. Vì vậy, sử dụng ví dụ ở trên những gì bạn sẽ thấy là trường field2Depend1được hiển thị nếu bạn chọn một tùy chọn có giá trị 2trên field1và field3Depend1được hiển thị nếu bạn chọn một tùy chọn có giá trị 3.
Tôi đã kiểm tra ví dụ này bằng cách chỉ sử dụng hidevà showtrên một trường bắt buộc và nó dường như có thể nhìn thấy để xác nhận. Nói cách khác, nếu field2Depend1được yêu cầu, nó sẽ chỉ được yêu cầu khi nhìn thấy. Không cần cấu hình thêm để làm việc.
Hy vọng điều này cung cấp một số trợ giúp cho bất cứ ai đang tìm kiếm một giải pháp vượt trội hơn.
