Select 下拉 组件

---

单选

• 开始
• POSUI
• 11
• GX123
• 烘干破碎
• 车间仓库
• ui3333
• hhh333

无数据

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueKey="label"
        @change="selectChange"
      ></p-select>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始', id: 1 },
        { label: 'POSUI', id: 2 },
        { label: '11', id: 3 },
        { label: 'GX123', id: 4 },
        { label: '烘干破碎', id: 5 },
        { label: '车间仓库', id: 6 },
        { label: 'ui3333', id: 7 },
        { label: 'hhh333', id: 8 }]
    }
  },
  methods: {
    selectChange(val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>

显示代码

itpeilibo微信二维码

自定义显示下拉项label

• 开始（1）
• POSUI（2）
• 11（3）
• GX123（4）
• 烘干破碎（5）
• 车间仓库（6）
• ui3333（7）
• hhh333（8）

无数据

设置customLabel字符串表达式：${item.label}（${item.id}）
注意：表达式必须以item开头，且后面的属性必须存在optionSource中

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueKey="label"
        customLabel="`${item.label}（${item.id}）`"
        @change="selectChange"
      ></p-select>
    </p-layout-page-item>
  </p-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始', id: 1 },
        { label: 'POSUI', id: 2 },
        { label: '11', id: 3 },
        { label: 'GX123', id: 4 },
        { label: '烘干破碎', id: 5 },
        { label: '车间仓库', id: 6 },
        { label: 'ui3333', id: 7 },
        { label: 'hhh333', id: 8 }]
    }
  },
  methods: {
    selectChange(val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>

显示代码

itpeilibo微信二维码

多选

全选
• 开始
• POSUI
• 11
• GX123
• 烘干破碎
• 车间仓库
• ui3333
• hhh333

无数据

<template>
  <p-layout-page>
    <p-layout-page-item>
      <p-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        multiple
        :optionSource="stepList"
        valueKey="label"
        @change="selectChange"
      />
    </p-layout-page-item>
  </p-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>

显示代码

itpeilibo微信二维码

p-select——下拉 组件组件

概述：

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

代码示例：

<p-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	-
width	select宽度（可以设置百分比或px）	String	100%
customLabel	是否自定义设置下拉label	String	-
valueKey	传入的 option 数组中，要作为最终选择项的键值 key	String	'key'
labelKey	传入的 option 数组中，要作为显示项的键值名称	String	'label'

继承 el-select events