add inline edit table demo

Author: PanJiaChen

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' }

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>
 

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>