我的样式是一行排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;
}
效果图