前端工作总结9回京一个月了，4月7号来的北京，集中隔离14天+居家观察7天4月份就过完了，加上五一放了天的长假，5月6好

回京一个月了，4月7号来的北京，集中隔离14天+居家观察7天4月份就过完了，加上五一放了天的长假，5月6好开始全员复工。在隔离的这段日子里由于自己主动接了一个项目，搞得自己异常的忙碌，曾经三天没睡过好觉了。下次一定要量力而行，不过忙碌中也还是有收获的。

想要留下的代码

有个vue项目做的是一个公共页面，路由都是动态路由，在菜单切换的时候页面没有刷新，加上下面的代码页面就更新了

<router-view :key="$route.fullPath"></router-view>

在项目中有动态路由的时候，路由的顺序也很重要，把相对确定的放在前面，完全动态的放在后面

router.push({
    path: '/:category/monitor',
    name: 'monitor',
    component: monitor
  })
  router.push({
    path: '/:category/:englishName',
    name: 'mainVue',
    component: Main
  })

element 级联组建，动态获取数据，有时候三级页面数据渲染晚一步，重点是getThirdOrg方法中使用的是this.secondData（先把secondData存起来）去赋值，而不是this.organizeData一级一级的赋值

    //获取第一级组织机构
    async getFirstOrg() {
      let data = await this.getOrganizations('00000000')
      this.organizeData = this.handleOrganizations(data)
    },
    //获取第二级组织机构
    async getSecondOrg(val) {
      this.firstIndex = this.searchIndex(this.organizeData, val)
      let secondData = await this.getOrganizations(val)
      this.organizeData[this.firstIndex].children = this.handleOrganizations(
        secondData
      )
      this.secondData = this.organizeData[this.firstIndex].children
    },
    //获取第三级组织机构
    async getThirdOrg(val) {
      let secondIndex = this.searchIndex(this.secondData, val)
      let thirdData = await this.getOrganizations(val)
      this.secondData[secondIndex].children = thirdData
    },
    async handleItemChange(val, isReview) {
      // 是否回显
      if (!isReview) {
        let nodesObj = this.$refs['cascader'].currentLabels
        this.partner.orgName = nodesObj
        if (val.length > 1) {
          await this.getThirdOrg(val[1])
        } else {
          await this.getSecondOrg(val[0])
        }
      } else {
        val[0] && (await this.getSecondOrg(val[0]))
        val[1] && (await this.getThirdOrg(val[1]))
      }
    },

element 动态表头

<jc-table
    class="form-loading"
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    height="100"
     >
    <jc-table-column property="name" label="QPS数量">
    </jc-table-column>
    <jc-table-column
        v-for="(item, index) in labelTable"
        :key="index"
        :label="item.tablename"
        :property="item.prop"
    >
        <template slot-scope="scope">{{
            scope.row[scope.column.property]
        }}</template>
    </jc-table-column>
</jc-table>
// 获取表格的数据
async getPriceList() {
      let params = {
        chargeType: 7
      }
      let { data } = await getUnitPriceList(this.englishName, params)
      let table = { name: '单价（元/月/QPS）' }
      data &&
        data.map(item => {
          let name = item.qps
          table[name] = item.price
        })
      table.last = '联系客服'
      this.tableData.unshift(table)//处理表格数据，业务的原因，表格只有一行数据
      this.handlePrice(data) // 处理表头的数据
    },
    // 处理表头数据
    handlePrice(data) {
      let len = data.length
      data &&
        data.forEach((item, index, array) => {
          let name = item.qps + ''
          if (index > 0 && index < len) {
            let pre = index - 1
            this.labelTable.push({
              tablename: `${array[pre].qps}<n<=${name}`,
              prop: name
            })
          } else {
            if (index === 0) {
              this.labelTable.push({ tablename: `0<n<=${name}`, prop: name })
            }
          }
        })
      let lastName = data[len - 1].qps
      this.maxQps = lastName
      this.labelTable.push({ tablename: `${lastName}<n`, prop: 'last' })
    },

遇到的坑

element 组件可多选的下拉框，初始赋值后，无法再次选择，业务场景是，一般的详情页回回显，多选组件回显没问题，但是想再次修改就改不了，后来发现是在回显的时候得先把对象赋予{} 才行，this.partner = Object.assign({}, this.partner, result.result) 这样去赋值就没有问题，this.partner = Object.assign( this.partner, result.result)这样就会有问题

前端工作总结9

想要留下的代码

遇到的坑

学习