vue 自定义省市联级插件

最新推荐文章于 2024-04-10 15:33:41 发布

原创

最新推荐文章于 2024-04-10 15:33:41 发布 · 338 阅读

1 ·

CC 4.0 BY-SA版权

本文分享了一段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" @change="chooseCity(item,$event)"></el-checkbox>
              <span class="text">{
 
 {item.areaName}}</span>
            </