vue3弹性布局 类似九宫格排列多选选项
我的样式是一行排10列
九宫格弹窗显示
代码如下
列表数据
const ymList = ref([
{
ym: "茯苓",
},
{
ym: "白芷",
},
{
ym: "苍耳子",
},
{
ym: "蝉蜕",
},
{
ym: "牛蒡子",
},
{
ym: "桑叶 ",
},
{
ym: "葛根",
},
{
ym: "柴胡",
},
{
ym: "蔓荆子",
},
{
ym: "知母",
},
]);
<el-dialog
v-model="ymDialogVisible"
title="请选择"
draggable
width="60%"
destroy-on-close
center
>
<div class="row">
<div
class="ymdiv"
@click="ymClick(item, index)"
v-for="(item, index) in ymList"
:key="index"
>
{{ item.ym }}
<el-icon color="#FF0000" v-if="item.click"><Select /></el-icon>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="ymDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="ymconfirm">确 定</el-button>
</span>
</template>
</el-dialog>
点击事件
//点击多选操作
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;
}
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;
}
效果图
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghagfa
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13