1. 基本用法:
<Select v-model="selectedValue">
<Select.Option label="选项1" value="option1" />
<Select.Option label="选项2" value="option2" />
<Select.Option label="选项3" value="option3" />
</Select>
在上述例子中，v-model 用于绑定选择器的值，selectedValue 是在 data 中定义的变量。
2. 禁用状态:
<Select v-model="selectedValue" disabled>
<Select.Option label="选项1" value="option1" />
<Select.Option label="选项2" value="option2" />
<Select.Option label="选项3" value="option3" />
</Select>
添加 disabled 属性可以禁用选择器。
3. 多选模式:
<Select v-model="selectedValues" multiple>
<Select.Option label="选项1" value="option1" />
<Select.Option label="选项2" value="option2" />
<Select.Option label="选项3" value="option3" />
</Select>
使用 multiple 属性可以启用多选模式，此时 v-model 绑定的是一个数组。
4. 自定义内容:
<Select v-model="selectedValue">
<Select.Option label="选项1" value="option1" />
<Select.Option label="选项2" value="option2" />
<Select.Option>
<i class="el-icon-edit"></i> 编辑
</Select.Option>
</Select>
除了使用 Select.Option，你还可以在 Select 中直接放置自定义内容。
5. 分组:
<Select v-model="selectedValue">
<Select.Group label="分组1">
<Select.Option label="选项1" value="option1" />
<Select.Option label="选项2" value="option2" />
</Select.Group>
<Select.Group label="分组2">
<Select.Option label="选项3" value="option3" />
<Select.Option label="选项4" value="option4" />
</Select.Group>
</Select>
使用 Select.Group 可以将选项分组显示。
6. 搜索:
<Select v-model="selectedValue" filterable>
<Select.Option label="选项1" value="option1" />
<Select.Option label="选项2" value="option2" />
<Select.Option label="选项3" value="option3" />
</Select>
添加 filterable 属性可以启用搜索功能。
7. 远程搜索:
<Select v-model="selectedValue" filterable remote :remote-method="remoteMethod">
<Select.Option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</Select>
使用 remote 属性和 remote-method 方法可以实现远程搜索。
methods: {
remoteMethod(query) {
// 发起远程搜索请求，更新 options 数据
}
}
以上是一些常见的 Element-React Select 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5602/Element-React