You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

2.2 KiB

props

名称 类型 默认值 说明
width string '300rpx' 选择框宽度
height string '60rpx' 选择框高度
round boolean true 是否开启圆角
bgColor string '#fff' 选择框的背景颜色
color string '#606266' 字体颜色
placeholderColor string 'color:#bcbec4' 提示文字的字体颜色
defaultValue string '请选择' 默认显示的名称
valueName string 'value' 显示的内容字段名,必传
list array [] 展示的内容列表
showClose boolean true 是否显示删除按钮
multiple boolean false 是否开启多选
filterable boolean false 是否开启搜索功能,开启后直接输入值不选择也可以保存内容

events

事件名 说明
change 选择的内容改变时触发,返回的参数为列表的item

使用举例

需要绑定的值通过v-model绑定,如下面的chooseValue,需要获取item的值可以监听@change事件

开启多选multiple时,双向绑定的值为数组类型,在change事件中根据自己需求进行处理。

valueName属性必须传,告知组件需要显示的是什么值

<template>
  <view class="login">
    <w-select style="margin-left: 20rpx;" 
              v-model='chooseValue' 
              defaultValue="所有审批人" 
              :list='list'
              valueName='content' 
              @change='change'>
    </w-select>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        chooseValue: "",
        list: [{
          id: 1,
          content: '张三'
        }, {
          id: 2,
          content: '李四'
        }, {
          id: 3,
          content: '王五'
        }],
      };
    },
    methods: {
      change(e) {
        console.log('chooseValue', this.chooseValue)
      }
    },
  }
</script>