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