前端开发中遇到常见问题总结

1、解决循环数组对象覆盖问题，有时循环一个数组push对象后，数组会是重复的最后一个对象，前面的被覆盖了

tabArr.forEach((item, index) => {

let lastSort = lastSort + 1 //排序加1

obj = { value: index, text: item, sort: lastSort } //加上sort属性为了每次循环创建是一个新对象，解决对象被覆盖的问题。

tempArr.push(obj)

})

2.vue中select框与输入框赋默认值时，不生效

在select组件中绑定change事件，change事件中调用$forceUpdate()强制刷新

3.如果使用router-link标签，加上@click事件，绑定的事件会无效

因为router-link的作用是单纯的路由跳转，会阻止click事件， 此时在click后面加上.native，才会触发事件。

4.post方法传参，后台参数放在form-data中，请求接口会报错

方法：要序列化请求参数，安装一个qs序列化插件，imort引入页面，qs.stringify(请求参数)

5.ant-design-vue中日历组件a-date-picker 禁用每周具体某天或者某几天

  <a-date-picker

              v-model="startValue"

              format="YYYY-MM-DD"

              placeholder="执行周期开始时间"

              style="width: 49.2%"

              :disabled-date="disabledStart"

              @change="changeTime"

            />

  disabledStart(val) {

      return new Date(val).getDay() !== 4

    },

6.vue前端本地导出

下载vue-json-excel插件

import JsonExcel from 'vue-json-excel'

 components: {  JsonExcel },

<json-excel

        class="export-btn"

        :data="dataSource"

        :fields="jsonFields"

        type="xls"

        header="影院列表"

        :name="excelName"

      >

        <a-button type="primary" icon="download">导出</a-button>

      </json-excel>

dataSource与jsonFields在data()中定义；dataSource是列表数组，jsonFields里面表头与对应字段名称

  jsonFields: {

        //导出Excel表格的表头设置

        匹配结果: {

          callback: (value) => {

            return value.matchResult == 'normal'

              ? '正常'

              : value.matchResult == 'disabled'

              ? '已禁用'

              : value.matchResult == 'expired'

              ? '已到期'

              : ''

          },

        },

        //影院编码: 'cinemaCode',

        影院编码: {

           callback: (value) => {

            return '&nbsp;' + value.cinemaCode + '&nbsp;'

          },

        },

        影院名称: 'cinemaName',

        厅数量: 'hallNum',

        采购时长: 'adDuration',

        服务方式: {

          callback: (value) => {

            return value.serviceType == 'auto'

              ? '线上自动'

              : value.serviceType == 'manu'

              ? '线上手动'

              : value.serviceType == 'manualOffline'

              ? '线下手动'

              : ''

          },

        },

      },

7、vue在页面赋值对象属性时一定要做非空判断，不然当对象为空时，object.reportNum 页面会报错undefinded例如：

   <span class="little-titile">已生成日度报告数量</span>

    <span class="number">{{ object&&object.reportNum }}</span>

8、vue中只有在return中定义的变量才会双向绑定，如果未在return定义要想实现双向绑定用this.$set()方法

9、前端分页实现

       const tableDataCache = []//接口一次性返回的所有数据放在缓存中

      const start = (this.query.page - 1) * this.query.pageSize

      const end = start + this.query.pageSize

      this.$nextTick(()=>{

        this.tableCodeData = tableDataCache.slice(start, end)

        this.totalCount = tableDataCache.length

      })