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
设置完以后重启一下编译器,成功解决