前言:
所参与的项目里,有个编辑页面是通过点击按钮能出现一个弹框,展示这个编辑项的所有值,可以实现选中几个,编辑项后就会展示几个,如下图。所用到的标签有el-tag(用来遍历选中的所有值)和el-checkbox-group标签(用来展示所有值)
如上图所示,左边框就是el-tag标签,用来展示你已经选择的值,右边框是el-checkbox-group标签,用来展示这一项所有的值:
<el-form-item label="主机组名称" :label-width="formLabelWidth" prop="zbx_group_name">
<el-tag :title="tag" size="medium" v-for="tag in zbx_group_name" :key="tag" :closable="closable" @close="handleClose(tag)"><span class="tags">{{tag}}</span></el-tag>
<el-button type="primary" size="small" @click="getGroupName" style="float:right;margin-top:3px">点击选择</el-button>
</el-form-item>
<!-- 主机组名称弹框 -->
<el-dialog title="主机组名称" :visible.sync="dialogHostname" style="margin-left:250px;" :modal="modal" :modal-append-to-body='false'>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="zbx_group_name">
<el-checkbox :title="item" style="width:120px;overflow:hidden;white-space:nowrap;" v-for="item in rolesName" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>
<div slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="dialogHostname = false">关 闭</el-button>
</div>
</el-dialog>
不论是左边需要遍历展示的值,还是右边需要选中然后绑定到左边的值,他们标签上v-model绑定的都是和编辑页面其他编辑项不一致的(其他都是addForm.xxx),由于一些不可抗原因,将主机组名称对应的字段名单独在data又定义了一遍。
这就导致当选择好提交,修改成功之后,再次打开编辑框,会发现之前选中的没有展示出来,原因是:我绑定的不是addForm.zbx_group_name,而提交的时候是这个,所以每次打开还需要重新获取一下zbx_group_name:
而且这时候要注意,因为是多选,所以当选中之后,给后台传过去的是一串字符串,每次监听得到的也是字符串,这时候,如果在el-tag上遍历字符串,那就会把几个长单词分割成很多字母,就不符合逻辑了,所以,如上图,在获取zbx_group_name时,需要用split方法,通过逗号分隔成数组,这样el-tag再去遍历就会把选中的几个长单词独立展示出来了。