vue 自定义省市联级插件

先上代码 代码有点乱 没来得及整理；

效果在最下边

<el-form-item label="包含省市">
  <el-button v-for="(item, index) in form.checkProvince">{
 { item }}<span class="el-icon-close" @click="deleteDataP(index)"></span></el-button>
  <el-button v-for="(item, index) in form.checkCityList">{
 { item }}<span class="el-icon-close" @click="deleteData(item,index)"></span></el-button>
  <el-button @click="AddProvCities"><span class="el-icon-plus">添加</span></el-button>
  <!-- 添加弹出框-开始-->
  <el-dialog title="选择省市" :visible.sync="dialogTableVisible">
    <div class="levelPanel">
      <!--<el-cascader-panel ref="cascaderAddr" :options="options" emitPath='false' :props="props"  @change="chooseCascader" v-model="form.ap"></el-cascader-panel>-->
      <div>
        <keep-alive>
          <el-checkbox-group v-model="form.checkProvince">
            <p v-for="(item,index) in province">
              <el-checkbox :label="item.areaName" @change="getCity(item,$event)" :indeterminate="item.judge"></el-checkbox>
              <span class="text" @click="getCityAll(item)">{
 {item.areaName}}</span>
            </p>
          </el-checkbox-group>
        </keep-alive>
      </div>
      <div>
        <keep-alive>
          <el-checkbox-group v-model="form.checkCity" ref="checkboxL">
            <p v-for="(item,index) in city">
              <el-checkbox :label="item.areaName