vxe-select下拉框-如何实现单选与复选框勾选功能
作者：袖梨
2026-05-27
增强用户体验的下拉选择组件常需在选项前添加勾选框，vxe-select通过show-radio和show-checkbox属性完美支持这一功能，让单选/多选操作更加直观明确。
单选框
在单选模式下启用show-radio属性后，每个选项前将显示单选框标记。
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' }
]
})
复选框
当需要多选时，使用show-checkbox属性即可在每个选项前显示复选框。
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' },
{
