一聚教程网:一个值得你收藏的教程网站

热门教程

vxe-select下拉框-如何实现单选与复选框勾选功能

时间:2026-05-27 18:45:01 编辑:袖梨 来源:一聚教程网

增强用户体验的下拉选择组件常需在选项前添加勾选框,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' }, {

热门栏目