4 changed files with 168 additions and 122 deletions
@ -1,120 +1,149 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-card class="box-card"> |
|||
<div slot="header"> |
|||
<a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html"> |
|||
Theme documentation |
|||
</a> |
|||
</div> |
|||
<div class="box-item"> |
|||
<span class="field-label">Change Theme : </span> |
|||
<el-switch v-model="theme" /> |
|||
<aside style="margin-top:15px;"> |
|||
Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details. |
|||
</aside> |
|||
</div> |
|||
</el-card> |
|||
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"> |
|||
<el-table-column align="center" label="ID" width="80"> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.id }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<div class="block"> |
|||
<el-button type="primary"> |
|||
Primary |
|||
</el-button> |
|||
<el-button type="success"> |
|||
Success |
|||
</el-button> |
|||
<el-button type="info"> |
|||
Info |
|||
</el-button> |
|||
<el-button type="warning"> |
|||
Warning |
|||
</el-button> |
|||
<el-button type="danger"> |
|||
Danger |
|||
</el-button> |
|||
</div> |
|||
<el-table-column width="180px" align="center" label="Date"> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<div class="block"> |
|||
<el-button type="primary" icon="el-icon-edit" /> |
|||
<el-button type="primary" icon="el-icon-share" /> |
|||
<el-button type="primary" icon="el-icon-delete" /> |
|||
<el-button type="primary" icon="el-icon-search"> |
|||
Search |
|||
</el-button> |
|||
<el-button type="primary"> |
|||
Upload |
|||
<i class="el-icon-upload el-icon-right" /> |
|||
</el-button> |
|||
</div> |
|||
<el-table-column width="120px" align="center" label="Author"> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.author }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<div class="block"> |
|||
<el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item"> |
|||
{{ tag.name }} |
|||
</el-tag> |
|||
</div> |
|||
<el-table-column width="100px" label="Importance"> |
|||
<template slot-scope="{row}"> |
|||
<svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" /> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<div class="block"> |
|||
<el-radio-group v-model="radio"> |
|||
<el-radio :label="3"> |
|||
Option A |
|||
</el-radio> |
|||
<el-radio :label="6"> |
|||
Option B |
|||
</el-radio> |
|||
<el-radio :label="9"> |
|||
Option C |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<el-table-column class-name="status-col" label="Status" width="110"> |
|||
<template slot-scope="{row}"> |
|||
<el-tag :type="row.status | statusFilter"> |
|||
{{ row.status }} |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<div class="block"> |
|||
<el-slider v-model="slideValue" /> |
|||
</div> |
|||
<el-table-column min-width="300px" label="Title"> |
|||
<template slot-scope="{row}"> |
|||
<template v-if="row.edit"> |
|||
<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(row)" |
|||
> |
|||
cancel |
|||
</el-button> |
|||
</template> |
|||
<span v-else>{{ row.title }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column align="center" label="Actions" width="120"> |
|||
<template slot-scope="{row}"> |
|||
<el-button |
|||
v-if="row.edit" |
|||
type="success" |
|||
size="small" |
|||
icon="el-icon-circle-check-outline" |
|||
@click="confirmEdit(row)" |
|||
> |
|||
Ok |
|||
</el-button> |
|||
<el-button |
|||
v-else |
|||
type="primary" |
|||
size="small" |
|||
icon="el-icon-edit" |
|||
@click="row.edit=!row.edit" |
|||
> |
|||
Edit |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { toggleClass } from '@/utils' |
|||
import '@/assets/custom-theme/index.css' // the theme changed version element-ui css |
|||
import { fetchList } from '@/api/article' |
|||
|
|||
export default { |
|||
name: 'Theme', |
|||
name: 'InlineEditTable', |
|||
filters: { |
|||
statusFilter(status) { |
|||
const statusMap = { |
|||
published: 'success', |
|||
draft: 'info', |
|||
deleted: 'danger' |
|||
} |
|||
return statusMap[status] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
theme: false, |
|||
tags: [ |
|||
{ name: 'Tag One', type: '' }, |
|||
{ name: 'Tag Two', type: 'info' }, |
|||
{ name: 'Tag Three', type: 'success' }, |
|||
{ name: 'Tag Four', type: 'warning' }, |
|||
{ name: 'Tag Five', type: 'danger' } |
|||
], |
|||
slideValue: 50, |
|||
radio: 3 |
|||
list: null, |
|||
listLoading: true, |
|||
listQuery: { |
|||
page: 1, |
|||
limit: 10 |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
theme() { |
|||
toggleClass(document.body, 'custom-theme') |
|||
created() { |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
async getList() { |
|||
this.listLoading = true |
|||
const { data } = await fetchList(this.listQuery) |
|||
const items = data.items |
|||
this.list = items.map(v => { |
|||
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 |
|||
return v |
|||
}) |
|||
this.listLoading = false |
|||
}, |
|||
cancelEdit(row) { |
|||
row.title = row.originalTitle |
|||
row.edit = false |
|||
this.$message({ |
|||
message: 'The title has been restored to the original value', |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
confirmEdit(row) { |
|||
row.edit = false |
|||
row.originalTitle = row.title |
|||
this.$message({ |
|||
message: 'The title has been edited', |
|||
type: 'success' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.field-label{ |
|||
vertical-align: middle; |
|||
.edit-input { |
|||
padding-right: 100px; |
|||
} |
|||
.box-card { |
|||
width: 400px; |
|||
max-width: 100%; |
|||
margin: 20px auto; |
|||
} |
|||
|
|||
.block { |
|||
padding: 30px 24px; |
|||
} |
|||
|
|||
.tag-item { |
|||
margin-right: 15px; |
|||
.cancel-btn { |
|||
position: absolute; |
|||
right: 15px; |
|||
top: 10px; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue