35.解决elementUI里el-tag遍历数据错误的问题

前言：

所参与的项目里，有个编辑页面是通过点击按钮能出现一个弹框，展示这个编辑项的所有值，可以实现选中几个，编辑项后就会展示几个，如下图。所用到的标签有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再去遍历就会把选中的几个长单词独立展示出来了。