element UI模态框复功能（自用）

<el-form-item label="适用城市"
   :rules="{
     required: true 
   }">
   <el-button size="small" @click="addCity" type="primary">添加城市</el-button>
   
   <span v-if="checkCity.length !== 0">
     <el-tag
       v-if="checkCity.length === cityTags.length"
       style="margin: 0 0 10px 10px;"
       >
         全部城市
     </el-tag>
     <el-tag
       v-else
       v-for="(item, index) in checkCity"
       :key="index"
       style="margin: 0 0 10px 10px;"
       >
         {{item.city}}
     </el-tag>
   </span>
 </el-form-item>
<el-dialog title="适用城市" :visible.sync="dialogFormVisible" 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部城市</el-checkbox>
      <br />
      <span v-for="(tag, index) in cityTags" :key="index" style="margin: 10px;display: inline-block;">
        <input
          type="checkbox" class="chk_1" :id="tag.code" :value="tag" v-model="formInline.cityCode" @change="handleCheckedCitiesChange(formInline.cityCode)" />
        <label :for="tag.code">{{tag.city}}</label>
      </span>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="determineCity">确 定</el-button>
        <el-button @click="cancelCity">取 消</el-button>
      </div>
    </el-dialog>

data() {
	checkCity: [], // 选中的城市
      formInline: {
        cityCode: [],
      },
}
determineCity() {
  this.dialogFormVisible = false;
  this.checkCity = this.formInline.cityCode;
},
cancelCity() {
  if (this.checkCity.length !== 0) {
    this.checkAll = true;
  } else {
    this.checkAll = false;
  }
  this.dialogFormVisible = false;
  this.formInline.cityCode = this.checkCity;
},
handleCheckAllChange(val) {
 this.formInline.cityCode = val ? this.cityTags : [];
  this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === this.cityTags.length;
  this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityTags.length;
}

.chk_1 {
            visibility: hidden;
        }
        .chk_1+label {
            padding: 5px 15px;
            border: 1px solid #eee;
            border-radius: 20px;
            font-weight: normal;
            font-size: 14px;
            cursor: pointer;
        }
        .chk_1:checked+label {
            padding: 5px 15px;
            border: 1px solid #eee;
            border-radius: 20px;
            background-color: #1890ff;
            font-weight: normal;
            color: #fff;
            cursor: pointer;
            font-size: 14px;
        }