perf: optimize the code of el-table slot-scope
This commit is contained in:
parent
a8c6e11ee6
commit
55fa5acb85
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue