zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[complex-table]:refine code (#2825) 

* 解决无法删除列表的bug;优化代码；

* perf: refine

Co-authored-by: 花裤衩 <panfree23@gmail.com>
This commit is contained in:
AndyLZC/AndyLZC.github.io 2020-01-07 22:30:07 +08:00 committed by 花裤衩
parent fd5a2e8da2
commit 55b1bbac99
2 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mock/article.js
View File

@ -18,7 +18,7 @@ for (let i = 0; i < count; i++) {
forecast: '@float(0, 100, 2, 2)', forecast: '@float(0, 100, 2, 2)',
importance: '@integer(1, 3)', importance: '@integer(1, 3)',
'type|1': ['CN', 'US', 'JP', 'EU'], 'type|1': ['CN', 'US', 'JP', 'EU'],
'status|1': ['published', 'draft', 'deleted'], 'status|1': ['published', 'draft'],
display_time: '@datetime', display_time: '@datetime',
comment_disabled: true, comment_disabled: true,
pageviews: '@integer(300, 5000)', pageviews: '@integer(300, 5000)',

26
src/views/table/complex-table.vue
View File

@ -80,7 +80,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width"> <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
<template slot-scope="{row}"> <template slot-scope="{row,$index}">
<el-button type="primary" size="mini" @click="handleUpdate(row)"> <el-button type="primary" size="mini" @click="handleUpdate(row)">
Edit Edit
</el-button> </el-button>
@ -90,7 +90,7 @@
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')"> <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
Draft Draft
</el-button> </el-button>
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')"> <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
Delete Delete
</el-button> </el-button>
</template> </template>
@ -319,13 +319,8 @@ export default {
const tempData = Object.assign({}, this.temp) const tempData = Object.assign({}, this.temp)
tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464 tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
updateArticle(tempData).then(() => { updateArticle(tempData).then(() => {
for (const v of this.list) { const index = this.list.findIndex(v => v.id === this.temp.id)
if (v.id === this.temp.id) {
const index = this.list.indexOf(v)
this.list.splice(index, 1, this.temp) this.list.splice(index, 1, this.temp)
break
}
}
this.dialogFormVisible = false this.dialogFormVisible = false
this.$notify({ this.$notify({
title: 'Success', title: 'Success',
@ -337,14 +332,13 @@ export default {
} }
}) })
}, },
handleDelete(row) { handleDelete(row, index) {
this.$notify({ this.$notify({
title: 'Success', title: 'Success',
message: 'Delete Successfully', message: 'Delete Successfully',
type: 'success', type: 'success',
duration: 2000 duration: 2000
}) })
const index = this.list.indexOf(row)
this.list.splice(index, 1) this.list.splice(index, 1)
}, },
handleFetchPv(pv) { handleFetchPv(pv) {
@ -358,7 +352,7 @@ export default {
import('@/vendor/Export2Excel').then(excel => { import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status'] const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status'] const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
const data = this.formatJson(filterVal, this.list) const data = this.formatJson(filterVal)
excel.export_json_to_excel({ excel.export_json_to_excel({
header: tHeader, header: tHeader,
data, data,
@ -367,8 +361,8 @@ export default {
this.downloadLoading = false this.downloadLoading = false
}) })
}, },
formatJson(filterVal, jsonData) { formatJson(filterVal) {
return jsonData.map(v => filterVal.map(j => { return this.list.map(v => filterVal.map(j => {
if (j === 'timestamp') { if (j === 'timestamp') {
return parseTime(v[j]) return parseTime(v[j])
} else { } else {
@ -378,11 +372,7 @@ export default {
}, },
getSortClass: function(key) { getSortClass: function(key) {
const sort = this.listQuery.sort const sort = this.listQuery.sort
return sort === `+${key}` return sort === `+${key}` ? 'ascending' : 'descending'
? 'ascending'
: sort === `-${key}`
? 'descending'
: ''
} }
} }
} }