2020-04-03 实习遇见的问题2

1.表单控件下拉框，绑定value和label的值，当后端传过来的值时，并没有对应绑定

原因，数据类型没有统一  

如果为字符串类型： 在后面加上 + ''

如果为int类型： parseInt( )

如果为double类型： parseFloat( )

2.向数组里面的对象添加空数组

运用对象的assign函数

var obj = {}
obj.assign(obj,{}) // 括号内为要添加的数据
obj.assign(obj, list:[])

3.vue table 绑定动态表单数据

v-model绑定值为数组对象中的数组时

 

 表单绑定数据结构为数组中对象中的数组

处理办法使用vue插槽

<template slot-scope="props">
   <el-table :data="data[props.$index].stationList"></el-table>
</template>

外面的表单绑定data，表单里面绑定data[props.$index].stationList，数组对象中的数组

4.处理input输入框focus冒泡问题 ，点击输入框弹出树结构，想点击空白处，收起树结构，在外层div设置click事件，点击input输入框触发focus事件的同时，会触发外层div的click事件

解决办法，将focus事件修改成原生click事件并添加stop阻止冒泡

 <el-input v-model="site" v-on:click.native.stop="focusHandle" @input="focusHandle">
 </el-input>

这样便可以解决触发冒泡现象

5.写页面结构的时候，首先要分成几大块，再往上面填东西，不能从上往下直接写，要先定结构，最后填东西

6.处理excel表格下载问题

①不带序号打包数据

<el-button @click="batchExport" plain>批量导出</el-button>

import XLSX from 'xlsx' 
 batchExport () {
      this.exportLoading = true
      this.cols.length === 0 && (this.cols = this.dictionaryTableThead.dictionaryTableThead.reduce((value, item) => {
        !item.action && value.push({ name: item.label, key: item.prop })
        !item.action && this.colTitles.push(item.label)
        return value
      }, []))
      let excelData = []
      let limit = 50
      vehicle.queryVehicles({
        ...this.userFilter,
        limit: limit,
        offset: 0
      }).then(response => {
        response && (excelData.push(...response.records))
        if (response.total >= limit) {
          Promise.all(Array.apply(null, Array(Math.ceil(response.total / limit))).reduce((value, item, i) => {
            value.push(vehicle.queryVehicles({
              ...this.userFilter,
              limit: limit,
              offset: i + 2
            }))
            return value
          }, [])).then(values => {
            console.log(values)
            values && values.reduce((t, v) => {
              excelData.push(...v.records)
              return t
            }, [])
            this.download(excelData)
          }).catch(error => {
            console.log(error)
            this.error('导出失败!').finally(() => {
              this.exportLoading = false
            })
          })
        } else {
          this.download(excelData)
        }
      }).finally(e => {
        excelData.length <= limit && (this.exportLoading = false)
      })
    },
    download (excelData) {
      let mergeData = excelData.reduce((value, item) => {
        value.push(this.dictionaryTableThead.dictionaryTableThead.reduce((v, i, index) => {
          !i.action && v.push(item[i.prop] !== undefined ? i.formatter ? i.formatter(0, index, item[i.prop]) : item[i.prop] : '')
          return v
        }, []))
        return value
      }, [this.colTitles])
      var worksheet = XLSX.utils.aoa_to_sheet(mergeData)
      var newWorkbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(newWorkbook, worksheet, 'vehicle')
      XLSX.writeFile(newWorkbook, 'vehicles.xlsx')
    },

 

②带序号多级表头修改格式打包数据

<el-button @click="batchExport">批量导出</el-button>

    sheet_from_array_of_arrays (data) {
      const ws = {}
      const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } }
      for (let R = 0; R !== data.length; ++R) {
        for (let C = 0; C !== data[R].length; ++C) {
          if (range.s.r > R) range.s.r = R
          if (range.s.c > C) range.s.c = C
          if (range.e.r < R) range.e.r = R
          if (range.e.c < C) range.e.c = C
          /// 这里生成cell的时候，使用上面定义的默认样式
          const cell = { v: data[R][C], s: this.defaultCellStyle }
          if (cell.v === null) continue
          // eslint-disable-next-line no-undef
          const cellRef = XLSX.utils.encode_cell({ c: C, r: R })
          /* TEST: proper cell types and value handling */
          if (typeof cell.v === 'number') cell.t = 'n'
          else if (typeof cell.v === 'boolean') cell.t = 'b'
          else if (cell.v instanceof Date) {
            cell.t = 'n'
            // eslint-disable-next-line no-undef
            cell.z = XLSX.SSF._table[14]
            cell.v = this.dateNum(cell.v)
          } else cell.t = 's'
          ws[cellRef] = cell
        }
      }
      /* TEST: proper range */
      // eslint-disable-next-line no-undef
      if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
      return ws
    },
sheet2blob (sheet, sheetName) {
      sheetName = sheetName || 'sheet1'
      const workbook = {
        SheetNames: [sheetName],
        Sheets: {}
      }
      workbook.Sheets[sheetName] = sheet

      // window.console.log(workbook)
      // 生成excel的配置项
      const wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
      }
      // eslint-disable-next-line no-undef
      const wbout = XLSX.write(workbook, wopts, { defaultCellStyle: this.defaultCellStyle })
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
      // 字符串转ArrayBuffer
      function s2ab (s) {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf)
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
        return buf
      }
      return blob
    },
batchExport () {
      this.exportLoading = true
      this.cols.length === 0 && (this.cols = this.tableThead.reduce((value, item) => {
        !item.action && value.push({ name: item.label, key: item.prop })
        !item.action && this.colTitles.push(item.label)
        return value
      }, []))
      // console.log(this.colTitles)
      let excelData = []
      let limit = 50
      customer.getPreInstallPage({ ownerName: this.formInline.userName, pageNo: 1, pageSize: limit, vehiidno: this.formInline.vehiidno, vin: this.formInline.vin }).then(response => {
        response && (excelData.push(...response.records))
        // console.log(response)
        if (response.total >= limit) {
          Promise.all(Array.apply(null, Array(Math.ceil(response.total / limit))).reduce((value, item, i) => {
            value.push(customer.getPreInstallPage({ ownerName: this.formInline.userName, pageNo: i + 2, pageSize: limit, vehiidno: this.formInline.vehiidno, vin: this.formInline.vin }))
            return value
          }, [])).then(values => {
            console.log(values)
            values && values.reduce((t, v) => {
              excelData.push(...v.records)
              return t
            }, [])
            this.download(excelData)
          }).catch(error => {
            console.log(error)
            this.error('导出失败!').finally(() => {
              this.exportLoading = false
            })
          })
        } else {
          this.download(excelData)
        }
      }).finally(e => {
        excelData.length <= limit && (this.exportLoading = false)
      })
    },
batchExport () {
      this.exportLoading = true
      this.cols.length === 0 && (this.cols = this.tableThead.reduce((value, item) => {
        !item.action && value.push({ name: item.label, key: item.prop })
        !item.action && this.colTitles.push(item.label)
        return value
      }, []))
      // console.log(this.colTitles)
      let excelData = []
      let limit = 50
      customer.getPreInstallPage({ ownerName: this.formInline.userName, pageNo: 1, pageSize: limit, vehiidno: this.formInline.vehiidno, vin: this.formInline.vin }).then(response => {
        response && (excelData.push(...response.records))
        // console.log(response)
        if (response.total >= limit) {
          Promise.all(Array.apply(null, Array(Math.ceil(response.total / limit))).reduce((value, item, i) => {
            value.push(customer.getPreInstallPage({ ownerName: this.formInline.userName, pageNo: i + 2, pageSize: limit, vehiidno: this.formInline.vehiidno, vin: this.formInline.vin }))
            return value
          }, [])).then(values => {
            console.log(values)
            values && values.reduce((t, v) => {
              excelData.push(...v.records)
              return t
            }, [])
            this.download(excelData)
          }).catch(error => {
            console.log(error)
            this.error('导出失败!').finally(() => {
              this.exportLoading = false
            })
          })
        } else {
          this.download(excelData)
        }
      }).finally(e => {
        excelData.length <= limit && (this.exportLoading = false)
      })
    },

这是效果图，代码有点长，如果有需要哪里看不懂可以下方留言