selector

需要配合group使用

Props

名字 类型 默认 描述
title String 标题
placeholder String placeholder
readonly Boolean false 只读
value String 表单值
v-model String value的双向绑定
options Array 选项,支持简单数组及key=>value键值对

Events

名字 参数 描述
on-change (value) 值变化时触发

Demos


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

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

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

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

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

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

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

<script>
export default {
  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>

results matching ""

    No results matching ""