AkkomaGang/admin-fe
6
2
Fork 9
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

perf[v-loading]: remove .body modifier #779

Browse source
This commit is contained in:
Pan 2018-06-26 17:10:21 +08:00
parent 76327a8f26
commit 2687b2eb3c
6 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/excel/exportExcel.vue
View file

@ -11,7 +11,7 @@
</el-radio-group> </el-radio-group>
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button> <el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row> <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='Id' width="95"> <el-table-column align="center" label='Id' width="95">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.$index}} {{scope.$index}}

2
src/views/excel/selectExcel.vue
View file

@ -3,7 +3,7 @@
<!-- $t is vue-i18n global function to translate lang --> <!-- $t is vue-i18n global function to translate lang -->
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input> <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button> <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange" <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
ref="multipleTable"> ref="multipleTable">
<el-table-column type="selection" align="center"></el-table-column> <el-table-column type="selection" align="center"></el-table-column>
<el-table-column align="center" label='Id' width="95"> <el-table-column align="center" label='Id' width="95">

10
src/views/table/complexTable.vue
View file

@ -21,8 +21,8 @@
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox> <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
</div> </div>
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
style="width: 100%"> style="width: 100%;min-height:1000px;">
<el-table-column align="center" :label="$t('table.id')" width="65"> <el-table-column align="center" :label="$t('table.id')" width="65">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
@ -221,7 +221,11 @@ export default {
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then(response => {
this.list = response.data.items this.list = response.data.items
this.total = response.data.total this.total = response.data.total
this.listLoading = false
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
}) })
}, },
handleFilter() { handleFilter() {

2
src/views/table/dragTable.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- Note that row-key is necessary to get a correct row order. --> <!-- Note that row-key is necessary to get a correct row order. -->
<el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" row-key="id" v-loading="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="ID" width="65"> <el-table-column align="center" label="ID" width="65">
<template slot-scope="scope"> <template slot-scope="scope">

4
src/views/table/inlineEditTable.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="ID" width="80"> <el-table-column align="center" label="ID" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
@ -89,9 +89,7 @@ export default {
const items = response.data.items const items = response.data.items
this.list = items.map(v => { this.list = items.map(v => {
this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
v.originalTitle = v.title // will be used when user click the cancel botton v.originalTitle = v.title // will be used when user click the cancel botton
return v return v
}) })
this.listLoading = false this.listLoading = false

2
src/views/zip/index.vue
View file

@ -3,7 +3,7 @@
<!-- $t is vue-i18n global function to translate lang --> <!-- $t is vue-i18n global function to translate lang -->
<el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input> <el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button> <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row> <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95"> <el-table-column align="center" label='ID' width="95">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.$index}} {{scope.$index}}