Select 条目选择

使用指南

import { selectGroup, Select, Option } from 'fs-ui'

export default {
  components: {
    fsSelectGroup: selectGroup,
    fsSelect: Select,
    fsOption: Option
  }
}

1
2
3
4
5
6
7
8
9

代码演示

基础

<fs-select title="全部菜单一" v-model="val1" @on-change="onChange">
  <fs-option v-for="(item, index) in foodList1" :value="item.value" :key="item.value" :disabled="index === 1">{{item.label}}</fs-option>
</fs-select>

1
2
3

禁用

<fs-select title="全部菜单一" v-model="val1" disabled>
  <fs-option v-for="item in foodList1" :value="item.value" :key="item.value">{{item.label}}</fs-option>
</fs-select>

1
2
3

分组

<fs-select-group>
  <fs-select title="跳转" v-model="val3" to="/input">
    <fs-option v-for="item in foodList3" :value="item.value" :key="item.value">{{item.label}}</fs-option>
  </fs-select>
  <fs-select title="菜单二" v-model="val3">
    <fs-option v-for="item in foodList3" :value="item.value" :key="item.value">{{item.label}}</fs-option>
  </fs-select>
  <fs-select title="菜单三" v-model="val4">
    <fs-option v-for="item in foodList4" :value="item.value" :key="item.value">{{item.label}}</fs-option>
  </fs-select>
</fs-select-group>

1
2
3
4
5
6
7
8
9
10
11

select

属性

参数	说明	类型	默认值
v-model	绑定的值	String, Number	-
disabled	是否disable	Boolen	-
title	默认选项的label	String	-

插槽

插槽名	说明
-	默认内容

selectGroup

插槽

插槽名	说明
-	默认内容

option

属性

参数	说明	类型	默认值
disabled	是否disable	Boolen	-
value	选项的值，必需	String, Boolen	-
label	选项label	String	-

← Linkage 级联选择 Picker 级联选择 →