|
@@ -167,6 +167,117 @@
|
|
|
</div>
|
|
|
<!-- </el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
+ <!-- 区县 -->
|
|
|
+ <el-tabs label="按区县" name="county" v-if="activeName === 'county'">
|
|
|
+ <!-- 按区县选择 -->
|
|
|
+ <div class="areaContainer" ref="countyScroll">
|
|
|
+ <!-- 省份盒子 -->
|
|
|
+ <div class="provinceBox" v-bind:class="clickProvince">
|
|
|
+ <div class="provinceBoxHeader">
|
|
|
+ <span>省份</span>
|
|
|
+ </div>
|
|
|
+ <div class="provinceList provinceTarget">
|
|
|
+ <p
|
|
|
+ class="listItem"
|
|
|
+ :id="'pro' + province.value"
|
|
|
+ v-for="province in provinces"
|
|
|
+ :key="province.value"
|
|
|
+ @click="getCityListInCounty(province)"
|
|
|
+ >
|
|
|
+ {{ province.label
|
|
|
+ }}<i
|
|
|
+ class="el-icon-arrow-right"
|
|
|
+ style="
|
|
|
+ display: block;
|
|
|
+ float: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 8px;
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 城市盒子 -->
|
|
|
+ <div class="provinceBox cityBox" v-bind:class="cityFlag">
|
|
|
+ <div class="provinceBoxHeader">
|
|
|
+ <span>城市</span>
|
|
|
+ </div>
|
|
|
+ <div class="provinceList cityTarget">
|
|
|
+ <p
|
|
|
+ class="listItem"
|
|
|
+ :id="'city' + city.value"
|
|
|
+ v-for="city in provinceToCity"
|
|
|
+ :key="city.value"
|
|
|
+ @click="getCountyList(city)"
|
|
|
+ >
|
|
|
+ {{ city.label
|
|
|
+ }}<i
|
|
|
+ class="el-icon-arrow-right"
|
|
|
+ style="
|
|
|
+ display: block;
|
|
|
+ float: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 8px;
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 区县盒子 -->
|
|
|
+ <div class="provinceBox cityBox" v-bind:class="countyFlag">
|
|
|
+ <div class="provinceBoxHeader">
|
|
|
+ <span>区县</span>
|
|
|
+ </div>
|
|
|
+ <div class="provinceList">
|
|
|
+ <!-- 区县复选框 -->
|
|
|
+ <!-- <el-checkbox :indeterminate="isIndeterminateCounty" v-model="checkAllCounty" @change="handleCheckAllChangeCounty" class="provinceCheckAll">全选</el-checkbox> -->
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="checkedCounties"
|
|
|
+ @change="handleCheckedCountiesChange"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ class="listItem"
|
|
|
+ v-for="county in cityToCounty"
|
|
|
+ :label="county"
|
|
|
+ :key="county.value"
|
|
|
+ >{{ county.label }}</el-checkbox
|
|
|
+ >
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 已选中区县 -->
|
|
|
+ <div class="selectedBox">
|
|
|
+ <div class="selectedBoxHeader">
|
|
|
+ <span>已选</span
|
|
|
+ ><span
|
|
|
+ class="empty"
|
|
|
+ v-if="checkedCounties.length !== 0"
|
|
|
+ @click="emptyCounty"
|
|
|
+ >清空</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="selectedItem">
|
|
|
+ <p v-for="county in checkedCounties" :key="county.value">
|
|
|
+ {{ county.label
|
|
|
+ }}<i
|
|
|
+ class="deleteCity el-icon-close"
|
|
|
+ @click="deleteCounty(county)"
|
|
|
+ style="margin-top: 3px"
|
|
|
+ ></i>
|
|
|
+ </p>
|
|
|
+ <!-- <img
|
|
|
+ src="./../../assets/image/empty.png"
|
|
|
+ alt="empty"
|
|
|
+ v-if="checkedCounties.length===0"
|
|
|
+ style="display:block;margin:50px auto 0"
|
|
|
+ > -->
|
|
|
+ <span v-if="checkedCounties.length === 0">暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|