Работа над HistoryPage

client/components/Reader/HistoryPage/HistoryPage.vue

@@ -13,6 +13,7 @@
                 stripe
                 border
                 :default-sort = "{prop: 'touchTime', order: 'descending'}"
+                :header-cell-style = "headerCellStyle"
                 >
 
                 <el-table-column
@@ -20,20 +21,24 @@
                     min-width="120px"
                     sortable
                     >
-                    <template slot="header" slot-scope="scope">
+                    <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
                         Время<br>просмотра
                     </template>
                 </el-table-column>
 
                 <el-table-column
-                    min-width="300px"
                     >
-                    <template slot="header" slot-scope="scope">
+                    <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
                         <el-input
                             v-model="search"
                             size="mini"
+                            style="margin: 0; padding: 0; vertical-align: bottom; margin-top: 10px"
                             placeholder="Найти"/>
                     </template>
+
+                    <el-table-column
+                        min-width="300px"
+                        >
                         <template slot-scope="scope">
                             <span>{{ scope.row.desc.author }}</span><br>
                             <span>{{ `"${scope.row.desc.title}"` }}</span>
@@ -50,6 +55,8 @@
                         </template>
                     </el-table-column>
 
+                </el-table-column>
+
             </el-table>
         </Window>
     </div>
@@ -98,6 +105,24 @@ class HistoryPage extends Vue {
             });
         }
 
+        const search = this.search;
+        return result.filter(item => {
+            return !search ||
+                item.touchTime.includes(search) ||
+                item.desc.title.toLowerCase().includes(search.toLowerCase()) ||
+                item.desc.author.toLowerCase().includes(search.toLowerCase())
+        });
+    }
+
+    headerCellStyle(cell) {
+        let result = {margin: 0, padding: 0};
+        if (cell.columnIndex > 0) {
+            result['border-bottom'] = 0;
+        }
+        if (cell.rowIndex > 0) {
+            result.height = '0px';
+            result['border-right'] = 0;
+        }
         return result;
     }
 
@@ -124,4 +149,8 @@ class HistoryPage extends Vue {
     max-width: 600px;
 }
 
+.header {
+    margin: 0;
+    padding: 0;
+}
 </style>