chore: 新增 refer 参考表格组件

- gr-table.vue: 通用 el-table 封装 (展开详情 + 事件透传) - gr-table-simple.vue: 简化版表格 - gr-table-plus.vue: 增强版 (筛选框 + 展开详情)
2026-08-26 19:14:34 +08:00
parent 8a08c8378f
commit a837e43b53
3 changed files with 372 additions and 0 deletions
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <el-table v-if="showTable" ref="mesSysTable" :data="data" :border="border" :height="height"
+        @select="(evt) => $emit('select',evt)" @select-all="(evt) => $emit('select-all',evt)"
+        @selection-change="(evt) => $emit('selection-change',evt)" @cell-mouse-enter="(evt) => $emit('cell-mouse-enter',evt)"
+       >
+      <el-table-column type="expand" v-if="slight && slight[0]">
+        <template slot-scope="scope">
+          <el-descriptions :column="1" style="margin: 0 20px;">
+            <el-descriptions-item v-for="(item, index) in getDataList(scope.row)" :label="item.label" :key="index">{{item.value}}</el-descriptions-item>
+          </el-descriptions>
+        </template>
+      </el-table-column>
+      <slot name="default">
+      </slot>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  props: ["data", "major","border","height"],
+  data() {
+    return {
+      mainCol: this.major,
+      rows: null,
+      showTable: true,
+      refreshing: false,
+    };
+  },
+
+  methods: {
+    getDataList(row) {
+      return Object.keys(row)
+      .filter((key) => this.slight.some((s) => s.prop == key)).map((key) => {
+          return {
+            label: this.slight.find((s) => s.prop == key).label,
+            value: row[this.slight.find((s) => s.prop == key).prop],
+          };
+        });
+    },
+    initData() {
+      let length = this.$slots.default.length, rows = this.$slots.default;
+      // if (window.innerWidth < 768) {   //判断PDA
+      if (!this.major || !this.major[0]) { //如果没有指定重要的列，默认第一列（一般是名称）和最后一列（一般是操作）
+        this.mainCol = [rows[0].componentOptions.propsData.prop,rows[length-1].componentOptions.propsData.prop]
+      }
+      this.slight = rows.filter((item) => { //筛选不重要的列，展示到expand中
+          return !(this.mainCol.some((main) => {
+            return main == item.componentOptions.propsData.prop;
+          }));
+        }).map((item) => {
+          return item.componentOptions.propsData;
+        });
+        this.rows = rows.filter((item) => { //去掉不重要的列
+        return this.mainCol.some((main) => {
+          return main == item.componentOptions.propsData.prop;
+        }) || !item.componentOptions.propsData.prop;
+      });
+      this.$slots.default = this.rows;
+    // }
+    }
+  },
+
+  created() {
+    this.initData(); 
+  },
+  updated() {
+    if (!this.refreshing) {
+      this.refreshing = true;
+      this.showTable = false;
+    } else{
+       setTimeout(()=> {
+        this.showTable = true;
+        this.initData();
+      },0)
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+
+::v-deep th.el-table__cell {
+ background: #0ECD4916 !important;
+   font-family: PingFangSC-Medium;
+  // font-size: 16px;
+  color: #323233;
+  line-height: 22px;
+  font-weight: 700;
+}
+
+::v-deep .el-table__cell {
+ padding: 8px !important;
+}
+</style>