fix:table排序修改
This commit is contained in:
@@ -160,7 +160,7 @@ export default {
|
|||||||
return `
|
return `
|
||||||
<div>
|
<div>
|
||||||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||||||
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
|
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
|
||||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||||
<div>value</div>
|
<div>value</div>
|
||||||
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
||||||
|
|||||||
@@ -215,7 +215,7 @@ export default {
|
|||||||
const self = this
|
const self = this
|
||||||
return `<div>
|
return `<div>
|
||||||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||||||
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
|
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
|
||||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||||
<div>value</div>
|
<div>value</div>
|
||||||
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
||||||
|
|||||||
@@ -6,10 +6,11 @@
|
|||||||
:data="tableData"
|
:data="tableData"
|
||||||
:height="'100%'"
|
:height="'100%'"
|
||||||
border
|
border
|
||||||
@sort-change="tableDataSort"
|
|
||||||
>
|
>
|
||||||
|
<!-- @sort-change="tableDataSort"-->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-for="(col, index) in columns"
|
v-for="(col, index) in columns"
|
||||||
|
:prop="col.title"
|
||||||
:key="`col-${index}`"
|
:key="`col-${index}`"
|
||||||
:min-width="100"
|
:min-width="100"
|
||||||
:sort-orders="['ascending', 'descending']"
|
:sort-orders="['ascending', 'descending']"
|
||||||
@@ -51,6 +52,7 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tableData: [],
|
tableData: [],
|
||||||
|
oldTableData: [],
|
||||||
columns: [],
|
columns: [],
|
||||||
valueMapping: {},
|
valueMapping: {},
|
||||||
tableTimer: null
|
tableTimer: null
|
||||||
@@ -83,6 +85,7 @@ export default {
|
|||||||
item.valueMapping = this.selectTableMapping(item, this.valueMapping)
|
item.valueMapping = this.selectTableMapping(item, this.valueMapping)
|
||||||
})
|
})
|
||||||
this.tableData = arr
|
this.tableData = arr
|
||||||
|
this.oldTableData = lodash.cloneDeep(arr)
|
||||||
this.$refs.dataTable && this.$refs.dataTable.doLayout()
|
this.$refs.dataTable && this.$refs.dataTable.doLayout()
|
||||||
}, 200)
|
}, 200)
|
||||||
},
|
},
|
||||||
@@ -139,6 +142,23 @@ export default {
|
|||||||
this.$emit('chartIsNoData', this.isNoData)
|
this.$emit('chartIsNoData', this.isNoData)
|
||||||
return returnData
|
return returnData
|
||||||
},
|
},
|
||||||
|
filterShowData (source) {
|
||||||
|
let orderBy = null
|
||||||
|
let sourceData = null
|
||||||
|
sourceData = this.oldTableData
|
||||||
|
orderBy = this.orderBy
|
||||||
|
if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
|
||||||
|
source = Object.assign([], sourceData)
|
||||||
|
} else { // 排序之后的顺序
|
||||||
|
if (orderBy.order === 'ascending') {
|
||||||
|
source = source.sort(this.asce(orderBy.prop))
|
||||||
|
}
|
||||||
|
if (orderBy.order === 'descending') {
|
||||||
|
source = source.sort(this.desc(orderBy.prop))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return source
|
||||||
|
},
|
||||||
selectTableMapping (row, valueMapping) {
|
selectTableMapping (row, valueMapping) {
|
||||||
const obj = {}
|
const obj = {}
|
||||||
this.columns.forEach((column) => {
|
this.columns.forEach((column) => {
|
||||||
@@ -221,8 +241,82 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
tableDataSort (orderBy) {
|
tableDataSort (orderBy) {
|
||||||
|
console.log(orderBy)
|
||||||
}
|
this.orderBy = { order: orderBy.order, prop: orderBy.prop }
|
||||||
|
this.seriesItem = this.filterShowData(this.tableData)
|
||||||
|
},
|
||||||
|
// 本地正序
|
||||||
|
asce (prop) {
|
||||||
|
return function (obj1, obj2) {
|
||||||
|
let val1 = obj1[prop]
|
||||||
|
let val2 = obj2[prop]
|
||||||
|
if (prop === 'value') {
|
||||||
|
val1 = obj1.oldValue
|
||||||
|
val2 = obj2.oldValue
|
||||||
|
if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop === 'value') {
|
||||||
|
val1 = Number(val1)
|
||||||
|
val2 = Number(val2)
|
||||||
|
}
|
||||||
|
} else if (prop === 'time') {
|
||||||
|
val1 = this.$tableSet.strTodate(val1)
|
||||||
|
val2 = this.$tableSet.strTodate(val2)
|
||||||
|
} else {
|
||||||
|
if (val1.alias) {
|
||||||
|
val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g, '')
|
||||||
|
} else {
|
||||||
|
val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g, '')
|
||||||
|
}
|
||||||
|
if (val2.alias) {
|
||||||
|
val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g, '')
|
||||||
|
} else {
|
||||||
|
val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (val1 < val2) {
|
||||||
|
return -1
|
||||||
|
} else if (val1 > val2) {
|
||||||
|
return 1
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 本地倒序
|
||||||
|
desc (prop) {
|
||||||
|
return function (obj1, obj2) {
|
||||||
|
let val1 = obj1[prop]
|
||||||
|
let val2 = obj2[prop]
|
||||||
|
if (prop === 'value') {
|
||||||
|
val1 = obj1.oldValue
|
||||||
|
val2 = obj2.oldValue
|
||||||
|
if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop === 'value') {
|
||||||
|
val1 = Number(val1)
|
||||||
|
val2 = Number(val2)
|
||||||
|
}
|
||||||
|
} else if (prop === 'time') {
|
||||||
|
val1 = this.$tableSet.strTodate(val1)
|
||||||
|
val2 = this.$tableSet.strTodate(val2)
|
||||||
|
} else {
|
||||||
|
if (val1.alias) {
|
||||||
|
val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g, '')
|
||||||
|
} else {
|
||||||
|
val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g, '')
|
||||||
|
}
|
||||||
|
if (val2.alias) {
|
||||||
|
val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g, '')
|
||||||
|
} else {
|
||||||
|
val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (val1 < val2) {
|
||||||
|
return 1
|
||||||
|
} else if (val1 > val2) {
|
||||||
|
return -1
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.chartInfo.loaded && this.initChart()
|
this.chartInfo.loaded && this.initChart()
|
||||||
|
|||||||
@@ -140,7 +140,7 @@ export default {
|
|||||||
return `
|
return `
|
||||||
<div>
|
<div>
|
||||||
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
|
||||||
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
|
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
|
||||||
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
<div style="font-size:12px;display:flex;justify-content: space-between;">
|
||||||
<div>value</div>
|
<div>value</div>
|
||||||
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user