带拼音的，城市筛选组件

一加一不是二

已于 2022-09-07 15:09:08 修改

阅读量548

点赞数

文章标签： vue.js elementui javascript

于 2022-09-07 14:36:15 首次发布

本文链接：https://blog.csdn.net/GardJasmin/article/details/126744665

版权

基于Vue实现，带拼音以及能搜索的，城市筛选组件

前提：Vue 2.x ，elementUI2

组件样式示例：

带拼音的，城市筛选组件，vue代码如下：

<template>
  <div>
    <el-popover placement="bottom-start" width="620" trigger="click" popper-class="option_more_city">
      <!--按钮-->
      <div class="" slot="reference">
        <p class="all_select_title" @click="openCity">
          <span class="place_color" :style="selectCitys&&selectCitys.length?'color:#666':'color:#999'">{
  { btnText }}</span><i class="el-icon-arrow-down"></i>
        </p>
      </div>
      <div class="all_pop_city tabs-style">
        <!--搜索-->
        <div class="r_search_city">
          <el-autocomplete class="inline-input" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" prefix-icon="el-icon-search"
            value-key="cityname" :trigger-on-focus="false">
          </el-autocomplete>
        </div>
        <div class="rel">
          <!--全选-->
          <div class="all_city" v-if="!isSingle&&isAll">
            <el-checkbox label="全选" v-model="selectAll" :indeterminate="isIndeterminate"></el-checkbox>
          </div>
          <el-tabs v-model="cityTabCur" v-if="cityListGroup && classify && classify.length">
            <el-tab-pane v-for="(item_int, index) in classify" :label="item_int" :name="item_int" :key="item_int + index">
              <!--多选-->
              <div class="city_checkbox" v-if="cityListGroup[item_int] && cityListGroup[item_int].length&&!isSingle">
                <div class="city_item" v-for="(item, index) in cityListGroup[item_int]" :key="item_int + index">
                  <p class="text_zm">{
  { item.name.toUpperCase() }}</p>
                  <el-checkbox-group v-model="selectCitys" class="clearfix" style="clear:none">
                    <el-checkbox v-for