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;
}

你可能感兴趣的:(Vue.js)