封装table组件

src/components/compTable.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-table
+    :data="tableData"
+    size="medium"
+    fit
+    :header-cell-style="{
+      height: '40px',
+      padding: '0',
+      background: '#f7f9fa',
+      'font-size': '16px',
+      color: '#8590a6',
+    }"
+  
+    ref="multipleTable"
+  
+    @sort-change="handleSort"
+    @filter-change="filterHandler"
+    @row-click="handleRowClick"
+  >
+    <el-table-column
+      v-for="(th, key) in tableHeader"
+      :key="key"
+      :prop="th.prop"
+      :label="th.label"
+      :fixed="th.fixed"
+      :sortable="th.sortable ? 'custom' : false"
+      :filters="th.filters"
+      :column-key="th.columnKey"
+      :filtered-value="th.filteredValue"
+      :filter-multiple="th.filterMultiple"
+      :min-width="th.minWidth"
+    
+    >
+      <template slot-scope="scope">
+        <ex-slot
+          v-if="th.render"
+          :render="th.render"
+          :row="scope.row"
+          :index="scope.$index"
+          :column="th"
+        />
+        <span v-else>{{ scope.row[th.prop] || "-" }}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+// 自定义内容的组件
+var exSlot = {
+  functional: true,
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null,
+    },
+  },
+  render: (h, data) => {
+    const params = {
+      row: data.props.row,
+      index: data.props.index,
+    };
+    if (data.props.column) params.column = data.props.column;
+    return data.props.render(h, params);
+  },
+};
+export default {
+  name: "comp-table",
+  components: { exSlot },
+  props: {
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    // 表头数据
+    tableHeader: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  methods: {
+    // 排序事件
+    handleSort(sort) {
+      this.$emit("sort-events", sort);
+    },
+    // 筛选事件
+    filterHandler(filters) {
+      this.$emit("filter-events", filters);
+    },
+    // 某一行被点击
+    handleRowClick(row) {
+      this.$emit("click-events", row);
+    },
+  },
+};
+</script>

src/views/Home.vue

@@ -22,7 +22,7 @@
       </el-header>
 
       <el-container>
-        <el-aside :width="isCollapse ? '64px' : '200px'">
+        <el-aside :width="isCollapse ? '64px' : '220px'">
           <el-menu style="height: 100%" default-active="2" class="el-menu-vertical-demo" background-color="#545c64" router
             active-text-color="#fff" :unique-opened="true" text-color="#000" @select="aa" :collapse="isCollapse"
             :collapse-transition="false">
@@ -108,6 +108,7 @@
   </div>
 </template>
 <script>
+///api/app/item/in-filter
 import router from "@/router";
 
 export default {

src/views/fee-settings/ItemResultTemplate.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="box">
     <div style="width: 95%">
-      <el-card> </el-card>
+      <el-card>
+        <comp-table :tableData="tableData" :tableHeader="tableHeader">
+        </comp-table>
+      </el-card>
     </div>
     <!-- 按钮区域 -->
     <div style="margin-left: 10px; margin-top: 5%">
@@ -12,7 +15,9 @@
 <script>
 import { getapi } from "@/api/api";
 import { getporjectlists } from "@/request/commonapi";
+import compTable from "@/components/compTable.vue";
 export default {
+  components: { compTable },
   data() {
     return {
       pages: {
@@ -20,7 +25,15 @@ export default {
         MaxResultCount: 100,
         Sorting: "displayOrder desc",
       },
-      itemId:[],//项目
+      itemId: [], //项目
+      tableData: [],
+      tableHeader: [
+        // 表头信息，可根据minWidth修改宽度
+        { prop: "id", label: "编号", },
+          { prop: "creationTime", label: "创建时间",  },
+        { prop: "displayName", label: "名称",  },
+          { prop: "displayName", label: "名称", },
+      ],
     };
   },
   created() {
@@ -33,9 +46,9 @@ export default {
       getporjectlists().then((res) => {
         this.itemId = res.data.items;
       });
-      getapi('/api/app/diagnosis/getlistinfilter').then(res=>{
-        
-      })
+      getapi("/api/app/diagnosis/getlistinfilter").then((res) => {
+        console.log(res);
+      });
     },
     //新增弹框
     add() {
@@ -45,15 +58,16 @@ export default {
       this.form = {};
     },
     getlist() {
-      getapi("/api/app/item-result-template", this.pages).then((res) => {
+      getapi("/api/app/item/in-filter", this.pages).then((res) => {
         console.log(res);
+        this.tableData = res.data.items;
       });
     },
   },
 };
 </script>
 <style scoped>
-.box{
-    display: flex;
+.box {
+  display: flex;
 }
 </style>