vue.js开发的商城地址组件

概述

根据公司需求，要结合element-ui开发的商城地址，已复选框的形式选择

详细

1，项目结构

2，项目运行实现效果图

3，实现代码

    1，html部分

<div>
      <div class="city-list">
        <div class="city-one" v-for="(item, index) in cityLists" :key="index">
          <el-checkbox v-model="item.ischeck" :disabled="item.disable" @change="itemChange(item)">{{ item.name }}{{ item.num === 0 ? '' : `(${item.num})` }}</el-checkbox>
          <div class="city-child">
            <div class="city-list">
              <div class="child-one" v-for="(i, j) in item.cityList" :key="j">
                <el-checkbox v-model="i.ischeck" :disabled="i.disable" @change="childChange(item)">{{ i.name }}</el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="configAdd">确 定</el-button>
      </span>
  </div>

    2，js部分

import ChineseDistricts from "./app.js"; //引用地址库
export default {
  data() {
    return {
      ChineseDistricts: ChineseDistricts,
      cityLists: []
    };
  },
  watch: {
  },
  created() {
    this.getData()
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {
    getData() {
      this.cityLists = []
      this.ChineseDistricts.forEach(item => {
        item.ischeck = false
        item.disable = false
        item.num = 0
        if (item.cityList && item.cityList.length > 0) {
          item.cityList.forEach(i => {
            i.ischeck = false
            i.disable = false
          })
        }
        this.cityLists.push(item)
      })
    },
    childChange(item) {
      item.num = 0
      item.ischeck = true
      if (item.cityList && item.cityList.length > 0) {
        item.cityList.forEach(items => {
          if (items.ischeck) {
              item.num ++
          }
        })
      }
      if (item.num === 0) {
        console.log(item.num)
        item.ischeck = false
      }
      this.$forceUpdate(); //VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
    },
    itemChange(item) {
      item.num = 0 //用于计数
      console.log(item, 'item=======')
      if(item.cityList && item.cityList.length > 0){
        if(item.ischeck){
          item.cityList.forEach(items=>{
            items.ischeck = true
            item.num ++ //一个省有多少个区被选则了
         })
        }else{
          item.cityList.forEach(items=>{
            items.ischeck = false
            item = 0
          })
        }
      }
      this.$forceUpdate();
    },
    configAdd() {
      console.log(this.cityLists,'4444')
      let arr = []
      if (this.cityLists.length > 0) {
        this.cityLists.forEach(item => {
          if (item.cityList && item.cityList.length > 0) {
            item.cityList.forEach(i => {
              if (i.ischeck && !i.disable) {
                arr.push(i)
              }
            })
          }
        })
      }
      console.log(arr, '选择的数组')
      if (arr.length === 0) {
        this.$message('请选择区域')
        return
      }
      this.$emit('on-affirm', arr, this.diatype)
    }
  }
};
</script>

    3，css样式

<style>
  .city-list{
    display: flex;
     align-items: center;
    flex-wrap:wrap;
  }
  .child-one {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .city-childs:hover{
    display: block;
    background: #ecf5ff;
  }
  .child-ones{
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .city-childs{
     display: none;
      position: absolute;
      top: 40px;
      left: 0;
      width: 400px;
      max-height: 200px;
      overflow: auto;
      background: #FFFFFF;
      z-index: 2;
  }
  .city-child {
      display: none;
      position: absolute;
      top: 40px;
      left: 0;
      width: 400px;
      max-height: 200px;
      overflow: auto;
      background: #FFFFFF;
      z-index: 2;
  }
  .city-one {
    width: 130px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }
    .city-one:hover .city-child {
      display: block;
      /* backgrounhsl(25, 100%, 76%)885; */
      background: #ecf5ff;
    }
</style>

4，运行环境，node.js

     1，运行命令：npm run dev

     2，打包命令：npm run build