vxe-select 下拉框实现带单选框/复选框勾选功能

用户841794814562026-05-25 10:43

在使用下拉选择组件时，有时需要在选项前显示单选框或复选框，以明确多选/单选的操作感。vxe-select 提供了 show-radio 和 show-checkbox 属性，可以轻松实现带勾选框的下拉选择。

单选框

通过 show-checkbox显示单选框

html 复制代码

<template>
  <div>
    <vxe-select v-model="val1" v-bind="selectOptions"></vxe-select>
  </div>
</template>

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

const val1 = ref()

const selectOptions = reactive({
  clearable: true,
  showRadio: true,
  options: [
    { value: 1001, label: 'table' },
    { value: 1002, label: 'grid' },
    { value: 1003, label: 'button' },
    { value: 1004, label: 'toolbar' },
    { value: 1005, label: 'tooltip' },
    { value: 1006, label: 'pager' },
    { value: 1007, label: 'print' },
    { value: 1008, label: 'export' },
    { value: 1009, label: 'import' },
    { value: 1010, label: 'select' },
    { value: 1012, label: 'checkbox' },
    { value: 1013, label: 'group' }
  ]
})
</script>

复选框

通过 show-checkbox显示复选框

html 复制代码

<template>
  <div>
    <vxe-select v-model="val1" v-bind="selectOptions"></vxe-select>
  </div>
</template>

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

const val1 = ref([])

const selectOptions = reactive({
  clearable: true,
  multiple: true,
  showCheckbox: true,
  options: [
    { value: 1001, label: 'table' },
    { value: 1002, label: 'grid' },
    { value: 1003, label: 'button' },
    { value: 1004, label: 'toolbar' },
    { value: 1005, label: 'tooltip' },
    { value: 1006, label: 'pager' },
    { value: 1007, label: 'print' },
    { value: 1008, label: 'export' },
    { value: 1009, label: 'import' },
    { value: 1010, label: 'select' },
    { value: 1012, label: 'checkbox' },
    { value: 1013, label: 'group' }
  ]
})
</script>

说i吗

show-radio 只对单选场景有效，show-checkbox只对对选场景有效
若下拉选项较多，可配合 filterable（可搜索）提升体验。

vxeui.com