AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonSelect 下拉框

基础用法 

<template>
  <div class="__common-layer-bread">
    <common-select :options="options" :propsMap="propsMap" v-model="selectValue"></common-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectValue = ref('');

const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])

const propsMap = ref({
  label:'name',
  value:'id'
})

</script>



<template>
  <div class="__common-layer-bread">
    <common-select :options="options" :propsMap="propsMap" v-model="selectValue"></common-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectValue = ref('');

const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])

const propsMap = ref({
  label:'name',
  value:'id'
})

</script>

配置参数

参数说明类型是否必须
options下拉框选项列表Array[]true
propsMap下拉框选项映射，通过对label和value的映射，满足各种数组字段使用需求，避免每次处理数组字段Object[]
---label显示文本string
---value选中后获取的结果Array[] String

3. 原始参数支持:

支持以v-bind 的形式传入对象，实现原始el-select所有属性，方法等的支持，如下例所示：


<template>
  <div class="__common-layer-bread">
    <common-select 
      v-bind="selectAttrabute" 
      :options="options" 
      :propsMap="propsMap" 
      v-model="selectValue"
      @change="changeEvent"
      ></common-select>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');

const selectAttrabute = ref({
  disabled: true,
  multiple: true,
  disabled: false,
  'collapse-tags-tooltip': true,
  effect:'light'
})
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>



<template>
  <div class="__common-layer-bread">
    <common-select 
      v-bind="selectAttrabute" 
      :options="options" 
      :propsMap="propsMap" 
      v-model="selectValue"
      @change="changeEvent"
      ></common-select>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const selectValue = ref('');

const selectAttrabute = ref({
  disabled: true,
  multiple: true,
  disabled: false,
  'collapse-tags-tooltip': true,
  effect:'light'
})
const options = ref([
  {name: '选项1', id:'option1'},
  {name: '选项2', id:'option2'},
  {name: '选项3', id:'option3'},
])


const propsMap = ref({
  label:'name',
  value:'id'
})

// change事件
function changeEvent(value) {
  proxy.$message(`当前选项${value} `)
}

</script>