1、数据处理
代码只做参考,部分有修改
async init() {
if (arguments[0] === undefined) {
//await 必须用在async后面才有效
if (!(await this.beforeInit())) {
return
}
}
return new Promise((resolve, reject) => {
this.loading = true
this.data = []
initData(this.url, this.params).then(res => {
for (let i = 0; i < res.content.length; i++) {
res.content[i].bills = {}
res.content[i].bills.a= res.content[i].a
res.content[i].bills.b= res.content[i].b
res.content[i].bills.c= res.content[i].c
res.content[i].bills.pid = res.content[i].id
res.content[i].bills.isShow = true
this.data.push(res.content[i].bills)
if (res.content[i].icstockbillEntries.length > 0) {
const temp = {
name: '',
number: 0
}
for (let j = 0; j < res.content[i].arr.length; j++) {
temp.name= `(${res.content[i].arr.length}条)`
temp.number+= Number(res.content[i].arr[j].number)
if (res.content[i].arr[j].s) {
res.content[i].arr[j].s = res.content[i].arr[j].s.sName
}
this.data.push(res.content[i].arr[j])
}
this.data.push(temp)
}
}
this.total = res.totalElements
console.log(this.data)
setTimeout(() => {
this.loading = false
}, this.time)
resolve(res)
}).catch(err => {
this.loading = false
reject(err)
})
})
},
2、表格方法
<el-table
v-loading="loading"
ref="tb"
:header-cell-style="{}"
:data="data"
:height="height"
:span-method="arraySpanMethod"
:row-class-name="tableRowClassName"
resizable
border
style="width: 100%"
@row-click="clickRow"
@row-dblclick="edit"
@selection-change = "selectData">
<el-table-column prop="bills" width="10px" label="" >
<template slot-scope="scoped" >
<div v-if="scoped.row.isShow" style="width:100%">
<!-- <svg-icon :icon-class="icon" /> -->
<span style="color:#3764A0">
单据信息(
单据编号:<span style="color:red">{{ scoped.row.a}}</span>
单据日期:<span style="color:red">{{ parseTime1(scoped.row.b) }}</span>
处理状态:<span style="color:red">{{ scoped.row.c|getStatus }}</span>
)
</span>
</div>
</template>
</el-table-column>
<!-- 多选框 -->
<el-table-column
type="selection"
width="40"/>
<el-table-column prop="name" label="名称" />
<el-table-column prop="code" width="100" label="代码" />
<el-table-column prop="model" width="200" label="型号" />
<el-table-column prop="level" width="80" label="级别" />
<el-table-column prop="unit" width="80" label="单位" />
<el-table-column prop="number" width="80" label="数量" />
</el-table>
export default {
//过滤器
filters: {
getStatus(val) {
switch (val) {
case 0:
return '未审'
case 1:
return '已审'
case 2:
return '二审'
}
}
},
//监听浏览器窗口大小改变
mounted() {
window.onresize = () => {
return (() => {
this.height = document.documentElement.clientHeight - 240
})()
}
},
data() {
return {
isClick: false,
visible: false,
freshVisible: false,
delLoading: false,
icon: 'icon1',
rowIds: [],
deleteIds: [],
detailIds: [],
multipleSelection: [],
isAdd: true,
conditions: {},
height: 625,
pageSize: 20
}
},
methods: {
// 合并表格行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 && this.data[rowIndex].isShow) {
return [1, 10]
}
for (let i = 1; i < 10; i++) {
if (columnIndex === 1 && this.data[rowIndex].isShow) {
return [1, 0]
}
}
},
// 斑马纹表格样式
tableRowClassName({ row, rowIndex }) {
let color = ''
if (rowIndex % 2 === 0) {
color = 'warning-row'
} else {
color = 'success-row'
}
if (row.isShow) {
color = 'table-row'
}
// 表格绑定的数据
// this.$refs.tb.tableData.forEach((r, i) => {
// console.log(r.isShow, '1212121221212')
// })
for (let i = 0; i < this.multipleSelection.length; i++) {
if (row === this.multipleSelection[i]) {
color = 'select-row'
}
}
return color
},
// 点击行时 变成单选
clickRow(row, event, column) {
console.log(row, '当前行')
this.$refs.tb.clearSelection()
const index = this.rowIds.indexOf(row.id)
console
if (index === -1) {
this.$refs.tb.toggleRowSelection(row, true)
} else {
this.rowIds = []
this.deleteIds = []
this.$refs.tb.toggleRowSelection(row, false)
}
},
}
}
utils.js文件夹下面有如下方法
// 去掉时分秒的时间
export function parseTime1(time) {
if (time) {
var date = new Date(time)
var year = date.getFullYear()
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* */
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
// 拼接
return year + '-' + month + '-' + day
} else {
return ''
}
}