onespot组件文档库

# Select 下拉 组件

# 单选

<template>
  <t-layout-page>
    <t-select
      placeholder="请选择工序"
      v-model="selectVlaue"
      :optionSource="stepList"
      valueKey="label"
      @change="selectChange"
    />
  </t-layout-page>
</template>
<script>
export default {
  data () {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始' }, { label: 'POSUI' }, { label: '11' }, { label: 'GX123' }, { label: '烘干破碎' }, { label: '车间仓库' }, { label: 'ui3333' }, { label: 'hhh333' }]
    }
  },
  methods: {
    selectChange (val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>
显示代码

# 多选

<template>
  <t-layout-page>
    <t-select
      placeholder="请选择工序"
      v-model="selectVlaue"
      multiple
      :optionSource="stepList"
      valueKey="label"
      @change="selectChange"
    />
  </t-layout-page>
</template>
<script>
export default {
  data () {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始' }, { label: 'POSUI' }, { label: '11' }, { label: 'GX123' }, { label: '烘干破碎' }, { label: '车间仓库' }, { label: 'ui3333' }, { label: 'hhh333' }]
    }
  },
  methods: {
    selectChange (val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>
显示代码

# t-select——下拉 组件组件

概述：

下拉选择组件————可实现单选多选（多选可使用全选功能）

代码示例：

<t-select
  v-model="selectVlaue"
  multiple
  :optionSource="listTypeInfo.stepList"
  valueKey="label"
  @change="selectChange"
/>

# 配置参数（Attributes）继承 el-select Attributes

参数 说明 类型 默认值
v-model 绑定值 boolean / string / number/Array 无
multiple 是否多选 Boolean false
optionSource 下拉数据源 Array 无
valueKey 传入的 option 数组中，要作为最终选择项的键值 key String 'key'
labelKey 传入的 option 数组中，要作为显示项的键值名称 String 'label'

# 继承 el-select events

← 下拉选择分页组件 →