-
vue3弹性布局 类似九宫格排列（多选选项）
我的样式是一行排10列
九宫格弹窗显示
代码如下
列表数据const ymList = ref([ { ym: "茯苓", }, { ym: "白芷", }, { ym: "苍耳子", }, { ym: "蝉蜕", }, { ym: "牛蒡子", }, { ym: "桑叶 ", }, { ym: "葛根", }, { ym: "柴胡", }, { ym: "蔓荆子", }, { ym: "知母", }, ]);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
{{ item.ym }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
点击事件
//点击多选操作 function ymClick(item, index) { item.click = !item.click; } //赋值到表单操作 需要定义 kftjForm.value.jtzc=[] function ymconfirm() { kftjForm.value.jtzc = ymList.value .filter((item) => item.click) .map((item) => item.ym) .join("、"); ymDialogVisible.value = false; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
css样式
.row { display: flex; margin-bottom: 5px; flex-direction: row; flex-wrap: wrap; } .ymdiv { width: 105px; height: 105px; line-height: 105px; text-align: center; border-collapse: collapse; margin-right:-1px; margin-bottom:-1px; cursor: pointer; border: 1px solid #a5a3a3; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
效果图
-
相关阅读:
jvm中的cms垃圾回收器和G1垃圾回收器有什么区别
WebDAV之葫芦儿·派盘+简悦
基于vue的实时交流聊天系统软件设计
Esko Ukkonen: On-line Construction of Suffix Trees
如何使能512个virtio_blk设备
“AttackCombo-basketball“ app Tech Support（URL）
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
MySQL索引的数据结构
【C++精华铺】10.STL string模拟实现
领域驱动设计：微服务的服务和数据的协作关系
- 原文地址：https://blog.csdn.net/hfyldx/article/details/126029202
