个人记录一个完整的vue项目开发及遇到的问题

本人第一次着手一个完整的vue项目，从2019.12开始至2020.7结束，中间由于各种需求的的变动，真正的开发时间只有3个月。

总结一些我遇到的一些问题：

1.同一个路由但是参数不同(例如 page?id=1与page?id=2)，无法刷新页面？

    解决方法：利用<router-view>的key属性，这两个路由的$route.fullPath并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:beforeRouteUpdate => created => mounted

2.iview中的树形控件（Tree）如何渲染后端返回的数据？

   

    解决方法：如下代码

 <Row>
        <Col span="12">
           <Tree :data="roleList" ref="tree"  show-checkbox :render="renderContent" @on-check-change="deptSelect"></Tree>
        </Col>
</Row>

 // 一级
      getTree (tree = []) {
        let arr = [];
        if (tree.length !== 0) {
          tree.forEach(item => {
            let obj = {};
            obj.role_type = item.role_type;
            obj.expand = true
            if(item.scope_roles != null ){ // 地市移动  客户经理
              if(item.roles != null){ // 供应商
                obj.children = this.getTreeSon(item.roles);
              }else {
                obj.children = this.getTreeSub(item.scope_roles);
              }
            }
            if(item.scope_roles == null && item.roles != null) { // 省移动 或者供应商
              obj.children = this.getTreeSon(item.roles);
            }
            arr.push(obj);
          });
        }
        return arr
      },
      // 二级
      getTreeSub (tree = []) {
        let arr = [];
        if (tree.length !== 0) {
          tree.forEach(item => {
            let obj = {};
            obj.expand = true
            obj.area_id = item.area_id;
            obj.area_name = item.area_name
            obj.scope = item.scope; // 其他你想要添加的属性
            obj.scope_id = item.scope_id; // 其他你想要添加的属性
            obj.scope_name = item.scope_name
            if(item.roles!=null) {
              obj.children = this.getTreeSon(item.roles);
            }
            if(item.roles == null) {
              obj.children = [];
            }
            arr.push(obj);
          });
        }
        return arr
      },
      // 三级
      getTreeSon (tree = []) {
        let arr = [];
        if (tree.length !== 0) {
          tree.forEach(item => {
            let obj = {};
            obj.checked = item.checked;
            obj.id = item.id
            obj.role_name = item.role_name; // 其他你想要添加的属性
            obj.children = [];
            arr.push(obj);
            if(item.checked == '1'){
              this.role_ids.push(item.id)
            }
          });
        }
        return arr
      },
      // 控件渲染
      renderContent (h, { root, node, data }) {
        if(data.role_type != null){// 大类
          let s = ''
          if(data.role_type == 1){
            s = '省移动'
          }
          if(data.role_type == 2){
            s = '地市移动'
          }
          if(data.role_type == 3){
            s = '移动客户经理'
          }
          if(data.role_type == 4){
            s = '供应商'
          }
          return h('span', {
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span',[
              h('Icon', {
                style: {
                  marginRight: '5px'
                }
              }),
              h('span', s)
            ]),
          ]);
        }
        if(data.scope_name != null){ //地市移动
          return h('span', {
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span',[
              h('Icon', {
                style: {

                  marginRight: '5px'
                }
              }),
              h('span', data.scope_name)
            ]),
          ]);
        }
        if(data.role_name != null){ //  省移动
          return h('span', {
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span',[
              h('Icon', {
                style: {
                  marginRight: '5px'
                }
              }),
              h('span', data.role_name)
            ]),
          ]);
        }
      },
      // 角色获取
      getChooseRole(datas) {
        this.$http.defaults.headers.common['token'] = this.token;
        this.$http.post(URL_CONFIG.UrlConfig.userChooseRole,datas)
          .then(res => {
            if (res.data.error_code == '0') {
             this.roleList = this.getTree(res.data.data)
            } else {
              this.$Message.error(res.data.message);
            }
          }).catch(error => {
          console.log(error)
        })
      },
      // 点击角色
      deptSelect(data){
        let selectArr = this.$refs.tree.getCheckedNodes();
        console.log(this.$refs.tree.getCheckedNodes());
        this.allCheck = data
        this.role_ids = []
        this.checkList = []
        for(let i = 0;i<data.length;i++){
          if(data[i].id){
            this.role_ids.push(data[i].id)
            this.checkList.push(data[i])
          }
        }
      },

3.iview中的复选框控件（Checkbox) 如何渲染后端返回的数据？

    解决如下代码：

        <div class="con-item" v-for="(item,index) in schoolList" :key="index">
          <div style="font-size: 16px;color: #0C9EFE">{{item.area_name}}</div>
          <div  v-for="(itemSub,indexSub) in item.districts" :key="indexSub">
            <div class="item-name">{{itemSub.district_name}}
              <Checkbox
                :value="itemSub.checkAll"
                @on-change="handleCheckAll(index,indexSub,itemSub)">
              </Checkbox>
            </div>
            <div class="item-input">
              <CheckboxGroup v-model="itemSub.checkAllGroup" @on-change="checkAllGroupChange(itemSub,indexSub)">
                <Checkbox :label="itemSon.school_id" v-for="(itemSon,indexSon) in itemSub.schools" :key="indexSon" >{{itemSon.school_name}}</Checkbox>
              </CheckboxGroup>
            </div>
          </div>
        </div>

   handleCheckAll (index,indexSub,itemSub) {
        itemSub.checkAll = !itemSub.checkAll;
        if (itemSub.checkAll) {
          for(let j=0;j<itemSub.schools.length;j++){
            itemSub.schools[j].checked = 1
            itemSub.checkAllGroup.push(itemSub.schools[j].school_id)
          }
        } else {
          itemSub.checkAllGroup = [];
        }
      },
      checkAllGroupChange (itemSub,indexSub) {
        if (itemSub.checkAllGroup.length === itemSub.schools.length ) {
          itemSub.checkAll = true;
        } else if (itemSub.checkAllGroup.length != itemSub.schools.length && itemSub.checkAllGroup.length > 0) {
          itemSub.checkAll = false;
        } else {
          itemSub.checkAll = false;
        }
      },
      // 获取学校列表
      getSchool(id) {
        this.$http.defaults.headers.common['token'] = this.token;
        let datas = {
          id:id
        }
        this.$http.post(URL_CONFIG.UrlConfig.getSchoolList,datas)
          .then(res => {
            if (res.data.error_code == '0') {
              this.show = false
              for(let i=0;i<res.data.data.length;i++){
                for(let j=0;j<res.data.data[i].districts.length;j++){
                  res.data.data[i].districts[j].checkAll = false
                  res.data.data[i].districts[j].checkAllGroup = []
                  for(let z=0;z<res.data.data[i].districts[j].schools.length;z++){
                    if(res.data.data[i].districts[j].schools[z].checked == 1){
                      res.data.data[i].districts[j].checkAllGroup.push(res.data.data[i].districts[j].schools[z].school_id)
                    }
                    if(res.data.data[i].districts[j].checkAllGroup.length == res.data.data[i].districts[j].schools.length){
                      res.data.data[i].districts[j].checkAll = true
                    }
                  }
                }
              }
              this.schoolList = res.data.data
            } else {
              this.$Message.error(res.data.message);
            }
          }).catch(error => {
          console.log(error)
        })
      },