El-Plus-Crud

Appearance

Select 选择器 ​

名称 ​

组件名称：ElPlusFormSelect

被引用类型: select

TIP

被引用类型是指：当该组件作为子组件被 form 或者 table 组件引用时， formDesc 中对应的 type 类型。

基础用法 ​

先看效果

代码
html
<div class="demo">
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '请选择 (size: large)', size: 'large' }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '请选择 (size: default)' }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '请选择 (size: small)', size: 'small' }" />
</div>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '被禁用了', disabled: true }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList }" placeholder="被禁用了" disabled />
</div>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '多选', multiple: true }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '多选折叠tag', multiple: true, collapseTags: true }" />
</div>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="desc1" />
  <ElPlusFormSelect class="item" style="width: 300px" :desc="desc2" />
</div>

<script lang="ts" setup>
  const testOptionsList = [
    { label: 'Option1', value: 1 },
    { label: 'Option2', value: 2 },
    { label: 'Option3', value: 3 },
    { label: 'Option4', value: 4, disabled: true },
    { label: 'Option5', value: 5 },
    { label: 'Option6', value: 6 }
  ]
  const desc1 = {
    options: testOptionsList,
    placeholder: '多选折叠tag + tooltip',
    multiple: true,
    collapseTags: true,
    collapseTagsTooltip: true
  }
  const desc2 = {
    options: testOptionsList,
    placeholder: '多选折叠tag + limit + tooltip',
    multiple: true,
    collapseTags: true,
    collapseTagsTooltip: true,
    maxCollapseTags: 2
  }
</script>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '请选择 (size: large)', size: 'large' }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '请选择 (size: default)' }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '请选择 (size: small)', size: 'small' }" />
</div>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '被禁用了', disabled: true }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList }" placeholder="被禁用了" disabled />
</div>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '多选', multiple: true }" />
  <ElPlusFormSelect class="item" :desc="{ options: testOptionsList, placeholder: '多选折叠tag', multiple: true, collapseTags: true }" />
</div>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="desc1" />
  <ElPlusFormSelect class="item" style="width: 300px" :desc="desc2" />
</div>

<script lang="ts" setup>
  const testOptionsList = [
    { label: 'Option1', value: 1 },
    { label: 'Option2', value: 2 },
    { label: 'Option3', value: 3 },
    { label: 'Option4', value: 4, disabled: true },
    { label: 'Option5', value: 5 },
    { label: 'Option6', value: 6 }
  ]
  const desc1 = {
    options: testOptionsList,
    placeholder: '多选折叠tag + tooltip',
    multiple: true,
    collapseTags: true,
    collapseTagsTooltip: true
  }
  const desc2 = {
    options: testOptionsList,
    placeholder: '多选折叠tag + limit + tooltip',
    multiple: true,
    collapseTags: true,
    collapseTagsTooltip: true,
    maxCollapseTags: 2
  }
</script>

官网组件的所有属性均可配置到 desc 属性中，组件的其他用法请参考 官网 Select

自定义选项后缀 ​

可通过设置 optionTip: (optionsItem) => string 属性，来自定义选项后缀 tip 的文言

代码
html
<ElPlusFormSelect class="item" :desc="desc" />

<script lang="ts" setup>
  import { ref } from 'vue'

  const desc = ref({
    options: testOptions2List,
    placeholder: '自定义模板',
    optionTip: (optionItem: any) => optionItem.tip
  })

  const testOptions2List = [
    { label: 'Option1', value: 1, tip: '对应选项1' },
    { label: 'Option2', value: 2, tip: '对应选项2' },
    { label: 'Option3', value: 3, tip: '对应选项3' },
    { label: 'Option4', value: 4, disabled: true, tip: '对应选项4' },
    { label: 'Option5', value: 5, tip: '对应选项5' },
    { label: 'Option6', value: 6, tip: '对应选项6' }
  ]
</script>
<ElPlusFormSelect class="item" :desc="desc" />

<script lang="ts" setup>
  import { ref } from 'vue'

  const desc = ref({
    options: testOptions2List,
    placeholder: '自定义模板',
    optionTip: (optionItem: any) => optionItem.tip
  })

  const testOptions2List = [
    { label: 'Option1', value: 1, tip: '对应选项1' },
    { label: 'Option2', value: 2, tip: '对应选项2' },
    { label: 'Option3', value: 3, tip: '对应选项3' },
    { label: 'Option4', value: 4, disabled: true, tip: '对应选项4' },
    { label: 'Option5', value: 5, tip: '对应选项5' },
    { label: 'Option6', value: 6, tip: '对应选项6' }
  ]
</script>

远程搜索 ​

通过配置 remote: (searchKey:string) => Promise 属性，可进行远程数据拉取。通过 initLoad: boolean 来控制是否渲染时就加载一次数据

代码
html
<div class="demo">
  <ElPlusFormSelect class="item" :desc="remoteDesc" style="width: 300px" />
  <ElPlusFormSelect class="item" :desc="remoteDesc2" />
</div>

<script lang="ts" setup>
  const remoteDesc = ref({
    placeholder: '输入进行远程搜索(默认查询一次)',
    remote: async (searchKey: string) => {
      return await new Promise((resolve) => {
        setTimeout(() => {
          const time = new Date().getTime()
          resolve(new Array(5).fill({}).map((item, i) => ({ value: time + i, label: `${searchKey} result ${i + 1}` })))
        }, 500)
      })
    }
  })

  const remoteDesc2 = ref({
    placeholder: '输入进行远程搜索(默认不查询)',
    initLoad: false,
    style: { width: '300px' },
    remote: async (searchKey: string) => {
      return await new Promise((resolve) => {
        setTimeout(() => {
          const time = new Date().getTime()
          resolve(new Array(5).fill({}).map((item, i) => ({ value: time + i, label: `${searchKey} result ${i + 1}` })))
        }, 500)
      })
    }
  })
</script>
<div class="demo">
  <ElPlusFormSelect class="item" :desc="remoteDesc" style="width: 300px" />
  <ElPlusFormSelect class="item" :desc="remoteDesc2" />
</div>

<script lang="ts" setup>
  const remoteDesc = ref({
    placeholder: '输入进行远程搜索(默认查询一次)',
    remote: async (searchKey: string) => {
      return await new Promise((resolve) => {
        setTimeout(() => {
          const time = new Date().getTime()
          resolve(new Array(5).fill({}).map((item, i) => ({ value: time + i, label: `${searchKey} result ${i + 1}` })))
        }, 500)
      })
    }
  })

  const remoteDesc2 = ref({
    placeholder: '输入进行远程搜索(默认不查询)',
    initLoad: false,
    style: { width: '300px' },
    remote: async (searchKey: string) => {
      return await new Promise((resolve) => {
        setTimeout(() => {
          const time = new Date().getTime()
          resolve(new Array(5).fill({}).map((item, i) => ({ value: time + i, label: `${searchKey} result ${i + 1}` })))
        }, 500)
      })
    }
  })
</script>

Option 特性 ​

1. 普通数组用法

代码
html
<ElPlusFormSelect class="item" :desc="{ options: foodList, placeholder: '早餐吃什么?', multiple: true }" />

<script lang="ts" setup>
  /**
   * 食物列表
   */
  const foodList = [
    { label: '牛奶', value: 1 },
    { label: '鸡蛋', value: 2 },
    { label: '面包', value: 3 },
    { label: '蛋糕', value: 4 },
    { label: '馒头', value: 5 },
    { label: '玉米', value: 6 },
    { label: '豆浆', value: 7 },
    { label: '咖啡', value: 8 }
  ]
</script>
<ElPlusFormSelect class="item" :desc="{ options: foodList, placeholder: '早餐吃什么?', multiple: true }" />

<script lang="ts" setup>
  /**
   * 食物列表
   */
  const foodList = [
    { label: '牛奶', value: 1 },
    { label: '鸡蛋', value: 2 },
    { label: '面包', value: 3 },
    { label: '蛋糕', value: 4 },
    { label: '馒头', value: 5 },
    { label: '玉米', value: 6 },
    { label: '豆浆', value: 7 },
    { label: '咖啡', value: 8 }
  ]
</script>

2. 函数返回数组(同步/异步)

代码
html
<ElPlusFormSelect :desc="{ options: () => foodList, placeholder: '早餐吃什么?（同步）', multiple: true }" />
<ElPlusFormSelect :desc="{ options: getFoodList, placeholder: '早餐吃什么?（异步）', multiple: true }" />

<script lang="ts" setup>
  /**
   * 食物列表
   */
  const foodList = [
    { label: '牛奶', value: 1 },
    { label: '鸡蛋', value: 2 },
    { label: '面包', value: 3 },
    { label: '蛋糕', value: 4 },
    { label: '馒头', value: 5 },
    { label: '玉米', value: 6 },
    { label: '豆浆', value: 7 },
    { label: '咖啡', value: 8 }
  ]
  /**
   * 获取食物列表
   */
  const getFoodList = () => new Promise((resolve) => setTimeout(() => resolve(foodList), 1000))
</script>
<ElPlusFormSelect :desc="{ options: () => foodList, placeholder: '早餐吃什么?（同步）', multiple: true }" />
<ElPlusFormSelect :desc="{ options: getFoodList, placeholder: '早餐吃什么?（异步）', multiple: true }" />

<script lang="ts" setup>
  /**
   * 食物列表
   */
  const foodList = [
    { label: '牛奶', value: 1 },
    { label: '鸡蛋', value: 2 },
    { label: '面包', value: 3 },
    { label: '蛋糕', value: 4 },
    { label: '馒头', value: 5 },
    { label: '玉米', value: 6 },
    { label: '豆浆', value: 7 },
    { label: '咖啡', value: 8 }
  ]
  /**
   * 获取食物列表
   */
  const getFoodList = () => new Promise((resolve) => setTimeout(() => resolve(foodList), 1000))
</script>

3. 字符串用法

使用字符串特性的前提是，全局注册 ElPlusCrud 时，传入 globalData 。参考 GlobalData 配置项

代码
vue
<ElPlusFormSelect class="item" :desc="{ options: 'foodList', placeholder: '早餐吃什么?', multiple: true }" />
<ElPlusFormSelect class="item" :desc="{ options: 'foodList', placeholder: '早餐吃什么?', multiple: true }" />
ts
// @/data/index.ts
/**
 * 食物列表
 */
export const foodList = [
  { label: '牛奶', value: 1 },
  { label: '鸡蛋', value: 2 },
  { label: '面包', value: 3 },
  { label: '蛋糕', value: 4 },
  { label: '馒头', value: 5 },
  { label: '玉米', value: 6 },
  { label: '豆浆', value: 7 },
  { label: '咖啡', value: 8 }
]
// @/data/index.ts
/**
 * 食物列表
 */
export const foodList = [
  { label: '牛奶', value: 1 },
  { label: '鸡蛋', value: 2 },
  { label: '面包', value: 3 },
  { label: '蛋糕', value: 4 },
  { label: '馒头', value: 5 },
  { label: '玉米', value: 6 },
  { label: '豆浆', value: 7 },
  { label: '咖啡', value: 8 }
]

API 属性 ​

这里只列举除官方组件以外的属性，官网属性参考 官网 Select API

desc 属性说明 ​