Mutual Exclusivity Behavior – Another Option

DEX601 - Unit 5 Implementing Navigation and Layouts

📄 第 362 页 🎬 视频课程

课程章节介绍

今天我们来聊聊如何在Salesforce的Lightning组件中实现相互排他性行为。相互排他性行为,简单来说,就是在一组选项中,你只能选择其中一个,不能同时选择多个。这在我们日常的界面设计中非常常见,比如选择性别、选择支付方式等。 在Salesforce的Lightning组件中,我们可以使用`lightning:radioGroup`这个组件来实现这个功能。这个组件会生成一组单选按钮,用户只能选择其中的一个选项。 我们来看一下代码示例: ```html ``` 在这段代码中,`lightning:radioGroup`组件的`type`属性设置为`"button"`,这意味着单选按钮会以按钮的形式显示。`name`属性是这组单选按钮的名称,`label`属性是这组按钮的标签,显示在按钮组的上方。 `options`属性绑定了一个变量`v.options`,这个变量是一个数组,数组中的每个元素代表一个选项。每个选项有两个属性:`tag`和`value`。`tag`是显示给用户看的文本,`value`是这个选项的实际值。 接下来,我们在JavaScript控制器中设置`v.options`的值: ```javascript cmp.set('v.options', [ {tag: "酒店", value: "1"}, {tag: "警告", value: "2"}, {tag: "培训中心", value: "3"}, {tag: "学生", value: "4"} ]); ``` 在这段代码中,我们设置了四个选项:酒店、警告、培训中心和学生。每个选项都有一个对应的值,分别是1、2、3和4。 当用户选择一个选项时,`lightning:radioGroup`组件会自动处理相互排他性行为,确保用户只能选择一个选项。 好了,这就是如何在Salesforce的Lightning组件中使用`lightning:radioGroup`实现相互排他性行为的方法。希望这个解释对你有帮助!如果有任何问题,随时问我哦!