---
nav: default
---
### Selector
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fselector"/>
<a href="demo/#/component/selector" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/selector</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/selector" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group :title="'no placeholder, the current value is : ' + defaultValue">
      <selector
        v-model="defaultValue"
        title="省份"
        :options="list"
      />
    </group>

    <group title="with placeholder">
      <selector
        placeholder="请选择省份"
        name="namellll"
        title="省份"
        :options="list"
        @on-change="onChange"
      />
    </group>

    <group title="without title">
      <selector
        placeholder="请选择省份"
        :options="list"
      />
    </group>

    <group title="set value=广西">
      <selector
        v-model="value1"
        title="省份"
        :options="plainList"
        @on-change="onChange"
      />
    </group>

    <group title="readonly, displays just like a cell">
      <selector
        value="gd"
        readonly
        title="省份"
        :options="list"
      />
    </group>

    <group title="use plain options">
      <selector
        value="C"
        title="Selector"
        :options="list1"
        @on-change="onChange"
      />
    </group>

    <group title="multi selector">
      <selector
        placeholder="请选择省份"
        title="省份"
        :options="list"
      />
      <selector
        v-model="value2"
        title="省份"
        :options="list"
      />
    </group>
  </div>
</template>

<script>
import { Selector, Group } from '../components/_index'

export default {
  components: {
    Group,
    Selector
  },
  data () {
    return {
      defaultValue: '',
      plainList: ['广东', '广西'],
      list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}],
      value1: '广西',
      value2: 'gd',
      list1: ['A', 'B', 'C']
    }
  },
  methods: {
    onChange (val) {
      console.log(val)
    }
  }
}
</script>

```

#### Github Issue