最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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' },
{
相关文章
- 王者s42装备怎样调整:王者s42装备调整详细内容 05-27
- 深海迷航2电流释放怎么解锁 05-27
- 梦幻西游战神山特别任务如何完成:战神山特别任务攻略指南 05-27
- 《梦幻西游》福禄丹坐骑成长加成解析-成长属性提升效果详解 05-27
- 湖北有礼2026票游湖北活动参加的方法步骤 05-27
- 快手极速版网页版在线观看方法详解-快手极速版网页版观看入口位置说明 05-27