diff --git a/src/router/index.js b/src/router/index.js index a79fa43aeb92d8924468f60d5e8b0fefeeb71801..e1a10ceb65545fbe07f952bd427b56f519b19064 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -54,6 +54,7 @@ const Theme = resolve => require(['../views/theme/index'], resolve); const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve); const Table = resolve => require(['../views/example/table'], resolve); const DragTable = resolve => require(['../views/example/dragTable'], resolve); +const InlineEditTable = resolve => require(['../views/example/inlineEditTable'], resolve); const Form1 = resolve => require(['../views/example/form1'], resolve); // const Form2 = resolve => require(['../views/example/form2'], resolve); @@ -180,6 +181,7 @@ export default new Router({ children: [ { path: 'dynamictable', component: DynamicTable, name: '动æ€table' }, { path: 'dragtable', component: DragTable, name: '拖拽table' }, + { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' }, { path: 'table', component: Table, name: '综åˆtable' }, { path: 'form1', component: Form1, name: '综åˆform1' } // { path: 'form2', component: Form2, name: '综åˆform2' } diff --git a/src/views/example/dragTable.vue b/src/views/example/dragTable.vue index 00eac5e2e7ca9f45547ba8f2445dd0d1c5dc1028..5f0d04ff09f11f1e4e690c501fe82c28a5c10304 100644 --- a/src/views/example/dragTable.vue +++ b/src/views/example/dragTable.vue @@ -17,7 +17,7 @@ <el-table-column min-width="300px" label="æ ‡é¢˜"> <template scope="scope"> - <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span> + <span>{{scope.row.title}}</span> </template> </el-table-column> @@ -35,7 +35,7 @@ <el-table-column align="center" label="阅读数" width="95"> <template scope="scope"> - <span class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span> + <span>{{scope.row.pageviews}}</span> </template> </el-table-column> diff --git a/src/views/example/inlineEditTable.vue b/src/views/example/inlineEditTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..988e3eda170de7b3162c53cd5a18c893f9e0a84d --- /dev/null +++ b/src/views/example/inlineEditTable.vue @@ -0,0 +1,101 @@ +<template> + <div class="app-container calendar-list-container"> + + <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> + + <el-table-column align="center" label="åºå·" width="80"> + <template scope="scope"> + <span>{{scope.row.id}}</span> + </template> + </el-table-column> + + <el-table-column width="180px" align="center" label="æ—¶é—´"> + <template scope="scope"> + <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> + </template> + </el-table-column> + + <el-table-column width="120px" align="center" label="作者"> + <template scope="scope"> + <span>{{scope.row.author}}</span> + </template> + </el-table-column> + + <el-table-column width="100px" label="é‡è¦æ€§"> + <template scope="scope"> + <wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" /> + </template> + </el-table-column> + + <el-table-column class-name="status-col" label="状æ€" width="100"> + <template scope="scope"> + <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> + </template> + </el-table-column> + + <el-table-column min-width="300px" label="æ ‡é¢˜"> + <template scope="scope"> + <el-input v-show="scope.row.edit" size="small" v-model="scope.row.title"></el-input> + <span v-show="!scope.row.edit">{{ scope.row.title }}</span> + </template> + </el-table-column> + + <el-table-column align="center" label="编辑" width="120"> + <template scope="scope"> + <el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="edit">编辑</el-button> + <el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="check">完æˆ</el-button> + </template> + </el-table-column> + + </el-table> + </div> +</template> + +<script> + import { fetchList } from 'api/article_table'; + + export default { + name: 'inline_edit-table_demo', + data() { + return { + list: null, + total: null, + listLoading: true, + listQuery: { + page: 1, + limit: 10 + } + } + }, + created() { + this.getList(); + }, + filters: { + statusFilter(status) { + const statusMap = { + published: 'success', + draft: 'gray', + deleted: 'danger' + }; + return statusMap[status] + } + }, + methods: { + getList() { + this.listLoading = true; + fetchList(this.listQuery).then(response => { + this.list = response.items.map(v => { + v.edit = false; + return v + }); + this.total = response.total; + this.listLoading = false; + }) + } + } + } +</script> + +<style > + +</style>