perf: optimize the code of el-table slot-scope

This commit is contained in:
Pan 2019-04-02 16:32:51 +08:00
parent a8c6e11ee6
commit 55fa5acb85
7 changed files with 46 additions and 46 deletions

View File

@ -9,25 +9,25 @@
<el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%"> <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
<el-table :data="errorLogs" border> <el-table :data="errorLogs" border>
<el-table-column label="Message"> <el-table-column label="Message">
<template slot-scope="scope"> <template slot-scope="{row}">
<div> <div>
<span class="message-title">Msg:</span> <span class="message-title">Msg:</span>
<el-tag type="danger"> <el-tag type="danger">
{{ scope.row.err.message }} {{ row.err.message }}
</el-tag> </el-tag>
</div> </div>
<br> <br>
<div> <div>
<span class="message-title" style="padding-right: 10px;">Info: </span> <span class="message-title" style="padding-right: 10px;">Info: </span>
<el-tag type="warning"> <el-tag type="warning">
{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }} {{ row.vm.$vnode.tag }} error in {{ row.info }}
</el-tag> </el-tag>
</div> </div>
<br> <br>
<div> <div>
<span class="message-title" style="padding-right: 16px;">Url: </span> <span class="message-title" style="padding-right: 16px;">Url: </span>
<el-tag type="success"> <el-tag type="success">
{{ scope.row.url }} {{ row.url }}
</el-tag> </el-tag>
</div> </div>
</template> </template>

View File

@ -11,9 +11,9 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Status" width="100" align="center"> <el-table-column label="Status" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>

View File

@ -26,17 +26,17 @@
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="Status" width="110"> <el-table-column class-name="status-col" label="Status" width="110">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="Title"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="{row}">
<router-link :to="'/example/edit/'+scope.row.id" class="link-type"> <router-link :to="'/example/edit/'+row.id" class="link-type">
<span>{{ scope.row.title }}</span> <span>{{ row.title }}</span>
</router-link> </router-link>
</template> </template>
</el-table-column> </el-table-column>

View File

@ -19,9 +19,9 @@
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="Title"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="{row}">
<span>{{ scope.row.title }}</span> <span>{{ row.title }}</span>
<el-tag>{{ scope.row.type }}</el-tag> <el-tag>{{ row.type }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -44,9 +44,9 @@
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="Status" width="110"> <el-table-column class-name="status-col" label="Status" width="110">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>

View File

@ -46,9 +46,9 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.title')" min-width="150px"> <el-table-column :label="$t('table.title')" min-width="150px">
<template slot-scope="scope"> <template slot-scope="{row}">
<span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.title }}</span> <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
<el-tag>{{ scope.row.type | typeFilter }}</el-tag> <el-tag>{{ row.type | typeFilter }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.author')" width="110px" align="center"> <el-table-column :label="$t('table.author')" width="110px" align="center">
@ -67,30 +67,30 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.readings')" align="center" width="95"> <el-table-column :label="$t('table.readings')" align="center" width="95">
<template slot-scope="scope"> <template slot-scope="{row}">
<span v-if="scope.row.pageviews" class="link-type" @click="handleFetchPv(scope.row.pageviews)">{{ scope.row.pageviews }}</span> <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
<span v-else>0</span> <span v-else>0</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.status')" class-name="status-col" width="100"> <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width"> <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)"> <el-button type="primary" size="mini" @click="handleUpdate(row)">
{{ $t('table.edit') }} {{ $t('table.edit') }}
</el-button> </el-button>
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')"> <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
{{ $t('table.publish') }} {{ $t('table.publish') }}
</el-button> </el-button>
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')"> <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
{{ $t('table.draft') }} {{ $t('table.draft') }}
</el-button> </el-button>
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')"> <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
{{ $t('table.delete') }} {{ $t('table.delete') }}
</el-button> </el-button>
</template> </template>

View File

@ -39,9 +39,9 @@
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="Status" width="110"> <el-table-column class-name="status-col" label="Status" width="110">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>

View File

@ -26,31 +26,31 @@
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="Status" width="110"> <el-table-column class-name="status-col" label="Status" width="110">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-tag :type="scope.row.status | statusFilter"> <el-tag :type="row.status | statusFilter">
{{ scope.row.status }} {{ row.status }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="Title"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="{row}">
<template v-if="scope.row.edit"> <template v-if="row.edit">
<el-input v-model="scope.row.title" class="edit-input" size="small" /> <el-input v-model="row.title" class="edit-input" size="small" />
<el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)"> <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
cancel cancel
</el-button> </el-button>
</template> </template>
<span v-else>{{ scope.row.title }}</span> <span v-else>{{ row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="Actions" width="120"> <el-table-column align="center" label="Actions" width="120">
<template slot-scope="scope"> <template slot-scope="{row}">
<el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)"> <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
Ok Ok
</el-button> </el-button>
<el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit"> <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
Edit Edit
</el-button> </el-button>
</template> </template>