【实习小tip】elementUI表格数值加减和实时计算、导出数据并解决手机号科学计数法格式问题、git clone报错：OpenSSL SSL_connect: SSL_ERROR_SYSCALL

element表格数值加减和实时计算

实现效果：

代码：

<el-table :data="voListForm" border show-summary :summary-method="getSummaries" style="width: 100%">
            <el-table-column prop="typeName" label="分类" width="80">
            </el-table-column>
            <el-table-column prop="itemName" label="项目" width="100">
            </el-table-column>
            <el-table-column prop="standard" sortable label="标准">
            </el-table-column>
            <el-table-column prop="score" sortable label="分值" width="100">
            </el-table-column>
            <el-table-column
              prop="deductScore"
              label="扣分"
              width="220"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  <el-input-number
                    v-model="scope.row.deductScore"
                    :min="0"
                    :max="100"
                    :disabled="isView"
                  >
                  </el-input-number>
                </div>
              </template>
            </el-table-column>
            
          </el-table>

getSummaries(param) {
      let score
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = ''
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (index === 4) {
            score = Number(sums[3] - Number(sums[4]))
          }
        } else {
          sums[index] = ''
        }
      })
      sums[3] = `总分:${score}（满分${sums[3]}）`
      return sums
    },

eltable导出数据同时解决手机号为科学计数法格式的问题

安装依赖

cnpm install --save xlsx file-saver

页面引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

添加方法

exportExcel()
{
    /* 转换成excel时，使用原始的格式，解决数字列自动转科学计数法问题 */
    let xlsxParam = {
        raw: true
    }; //如果不加这个，会被自动转化格式，如身份证号/手机号，会被转成数字，展示为1.6697E+10
    /* out-table关联导出的dom节点 */
    let wb = XLSX.utils.table_to_book( document.querySelector( '#out-table' ), xlsxParam );
    /* 获取二进制字符串作为输出 */
    let wbout = XLSX.write( wb,
    {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    } );
    try
    {
        /* Blob 对象表示一个不可变、原始数据的类文件对象
        Blob 表示的不一定是JavaScript原生格式的数据。
        File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
        返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
         */
        let excelName = "设置导出文件名称"
        FileSaver.saveAs(
            new Blob( [ wbout ],
            {
                type: 'application/octet-stream'
            } ),
            `${excelName}.xlsx`, //设置导出文件名称
        )
    }
    catch ( e )
    {
        if ( typeof console !== 'undefined' ) console.log( e, wbout );
    }
    return wbout;
}

导出事件绑定

<button @click="exportExcel()">导出</button>

给table添加id

<el-table id="out-table" :data="tableData" >
...
</el-table>

git clone报错：OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

代理问题

在git命令行输入

git config --global --unset http.proxy

如果是https设置为

git config --global --unset https.proxy

设置完以后重启一下编译器，成功解决