Vue实现城市选择器,全选/全不选/单选

感谢收看

基于vue实现的城市选择器,废话不多说，直接上代码:

<template>
  <div class="contaienr">
    <el-select
      v-model="value"
      placeholder="请选择"
      style="float: left;margin:100px;"
      @change="hide()"
    >
      <el-option
        v-for="item in mapData"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      >
        <div class="mapData" @click="hide()">
          <div class="map_item clearfix">
            <div class="left">
              <label
                ><input
                  type="checkbox"
                  name="is"
                  :value="item.name"
                  :checked="item.isCheck"
                  @click="isCheck(item)"
                />{{ item.name }}</label
              >
            </div>
            <div class="right clearfix">
              <label v-for="(item1, index1) in item.list" :key="index1"
                ><input
                  type="checkbox"
                  :value="item1.code"
                  v-model="item.checkedNames"
                />{{ item1.title }}</label
              >
            </div>
          </div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      //城市数据
      value: "",
      mapData: [
        {
          name: "北京市",
          isCheck: false,
          list: [
            {
              title: "中国环科院站",
              code: "BJ01",
            },
            {
              title: "中国环科站",
              code: "BJ02",
            },
            {
              title: "中国环科站点",
              code: "BJ03",
            },
            {
              title: "中国环科站点",
              code: "BJ04",
            },
            {
              title: "中国环科院站",
              code: "BJ05",
            },
            {
              title: "中国环科站",
              code: "BJ06",
            },
            {
              title: "中国环科站点",
              code: "BJ07",
            },
            {
              title: "中国环科站点",
              code: "BJ8",
            },
          ],
          //选中数据
          checkedNames: [],
        },
        {
          name: "天津市",
          isCheck: false,

          list: [
            {
              title: "中国环科院站",
              code: "TJ01",
            },
            {
              title: "中国环科站",
              code: "TJ02",
            },
            {
              title: "中国环科站点",
              code: "TJ03",
            },
          ],
          //选中数据
          checkedNames: [],
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    isCheck(item) {
      item.isCheck = !item.isCheck;
      if (item.isCheck) {
        for (var i = 0; i < item.list.length; i++) {
          if (item.checkedNames.indexOf(item.list[i].code) == -1) {
            item.checkedNames.push(item.list[i].code);
          }
        }
      } else {
        item.checkedNames = [];
      }
    },
    hide() {
      setTimeout(() => {
        //失去焦点
        let arr = [];
        //添加选中城市
        for (var i = 0; i < this.mapData.length; i++) {
          for (var j = 0; j < this.mapData[i].checkedNames.length; j++) {
            arr.push(this.mapData[i].checkedNames[j]);
          }
        }
        //选中城市
        console.log("所选城市=======>" + arr);
        console.log(arr);

        //select
        this.value = "选择站点(" + arr.length + ")";
        console.log(this.value);
      }, 100);
    },
  },
};
</script>
<style>
.mapData {
  width: 600px;
}
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.left {
  float: left;
}
.right {
  float: right;
  width: 500px;
}
.right label {
  display: block;
  width: 33%;
  float: left;
}
.el-select-dropdown__item {
  overflow: visible;
  height: auto;
}
</style>

效果图

写的比较着急，还有一点bug 

本来想多做介绍的，下班了，拜拜各位!