以下是完整代码,仅供参考:
<template>
<div class="tagDialog crmDialog">
<el-dialog
title="批量更新标签"
:visible="true"
width="600px"
:show-close="false"
:close-on-press-escape="false"
:close-on-click-modal="false"
style="text-align:left"
>
<el-form
ref="ruleForm"
class="defaultForm"
:model="ruleForm"
:rules="rules"
>
<el-form-item
:label="
this.categoryItem.name + '(' + this.optionModeDesc + ')' + ':'
"
prop="tag"
class="formTitle"
>
<!-- 多选 -->
<!-- 可以传给 v-bind:class 一个对象,以动态地切换样式 class -->
<div class="znlh-tab-select">
<div class="tag-group" v-if="optionMode != 0">
<el-tag
v-for="(tag, index) in tagOptions"
:key="index"
@click="handleChecks(tag)"
:class="{ active: tag.checked }"
effect="plain"
>
{
{tag.labelName.length>10?tag.labelName.substring(0,10)+'...':tag.labelName}}
</el-tag>
<!-- 多选自定义添加 -->
<el-tag
v-for="item in customList"
:key="item.labelName"
closable
effect="plain"
@click="handleChecks(item)"
:class="{ active: item.checked }"
@close="handleClose(item)"
>
{
{item.labelName.length>10?item.labelName.substring(0,10)+'...':item.labelName}}
</el-tag>
</div>
<!-- 单选 -->
<div v-else>
<el-tag
v-for="(tag, idx) in tagOptions"
:key="idx"
@click="handleRadio(1, tag, idx