页面绘制

src/views/Report/ReportList.vue

@@ -88,7 +88,23 @@
             </el-row>
         </div>
         <div class="table">
-            <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
+            <el-row>
+                <el-col :span="4" class="treeList">
+                    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+                    </el-input>
+                    <el-tree
+                    class="filter-tree"
+                    :data="treeData"
+                    show-checkbox
+                    node-key="id"
+                    default-expand-all
+                    :filter-node-method="filterNode"
+                    ref="tree"
+                    >
+                    </el-tree>
+                </el-col>
+                <el-col :span="19">
+                <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
                 <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
                     <template #default="{ row, rowIndex }">
                         {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
@@ -129,6 +145,7 @@
 <!--                        <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
                     </template>
                 </vxe-column>
+                
             </vxe-table>
             <el-pagination
                 @size-change="handleSizeChange"
@@ -138,6 +155,12 @@
                 :page-size="q.pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"/>
+            </el-col>
+            </el-row>
+           
+
+           
+            
         </div>
 
         <!--预览-->
@@ -208,10 +231,77 @@ export default {
         }
       },
       dialogPreview: false, // 预览
-      content: ''
+      content: '',
+      filterText:'',
+      treeData: [
+                {
+                    id: 0,
+                    label: '根节点',
+                    children: [
+                        {
+                            id: 1,
+                            label: '一级 1',
+                            children: [
+                                {
+                                    id: 4,
+                                    label: '二级 1-1',
+                                    children: [
+                                        {
+                                            id: 9,
+                                            label: '三级 1-1-1'
+                                        },
+                                        {
+                                            id: 10,
+                                            label: '三级 1-1-2'
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            id: 2,
+                            label: '一级 2',
+                            children: [
+                                {
+                                    id: 5,
+                                    label: '二级 2-1'
+                                },
+                                {
+                                    id: 6,
+                                    label: '二级 2-2'
+                                }
+                            ]
+                        },
+                        {
+                            id: 3,
+                            label: '一级 3',
+                            children: [
+                                {
+                                    id: 7,
+                                    label: '二级 3-1'
+                                },
+                                {
+                                    id: 8,
+                                    label: '二级 3-2'
+                                }
+                            ]
+                        },
+                    ]
+
+                }
+            ],
     }
   },
+  watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
   methods: {
+    filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
     init () {
       this.labelList()
       this.reportDateList()
@@ -341,6 +431,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.treeList{
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    margin-right: 20px;
+    .filter-tree{
+        margin-top: 20px;
+    }
+
+}
 .report-list {
     .title {
         border-bottom: 1px solid #EBEEF5;