表格二次封装1

src/components/publicModule/lkyTable.vue

@@ -0,0 +1,393 @@
+<!-- 封装表格  -->
+<template>
+  <!-- 本组件样式包含表格、分页 -->
+  <div class="table_pagination_body" :style="table_pagination_style">
+    <el-table
+      class="lky_table"
+      :data="table_data"
+      :height="table_height"
+      :cell-style="{ background: 'revert', 'text-align': 'center' }"
+    >
+      <!-- 是否需要多行选择数据 -->
+      <el-table-column
+        v-if="table_select"
+        type="selection"
+        width="55"
+        align="center"
+      >
+      </el-table-column>
+      <!-- 是否需要数据序号 -->
+      <el-table-column
+        v-if="table_index"
+        label="序号"
+        type="index"
+        width="70"
+        align="center"
+      ></el-table-column>
+      <template v-for="item in table_columns">
+        <!-- 如果有多级表头 -->
+        <template v-if="item.children">
+          <el-table-column :key="item.prop" :label="item.label" align="center">
+            <template>
+              <el-table-column
+                v-for="val in item.children"
+                :key="val.prop"
+                :prop="val.prop"
+                :label="val.label"
+                :width="val.width"
+                align="center"
+              >
+                <!-- 如果val.picture为ture时，则该列单元格可显示图片 -->
+                <template v-if="val.picture" #default="{ row }">
+                  <!-- 二级表数据照片 -->
+                  <el-image
+                    :src="row.pic_child"
+                    style="width: 42px; height: 42px"
+                  >
+                    <div slot="error" class="image-slot">
+                      <img src="@/assets/companyFile/avatar.png" alt="" />
+                    </div>
+                  </el-image>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 如果没有多级表头 -->
+        <template v-else>
+          <el-table-column
+            :key="item.prop"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            align="center"
+          >
+            <!-- 如果item.picture为ture时，则该列单元格可显示图片 -->
+            <template v-if="item.picture" #default="{ row }">
+              <el-image
+                :src="row.pic"
+                style="width: 42px; height: 42px"
+              >
+                <div slot="error" class="image-slot">
+                  <img src="@/assets/companyFile/avatar.png" alt="" />
+                </div>
+              </el-image>
+            </template>
+            <!-- 如果item.picture_two为ture时，则该列单元格可显示图片 -->
+            <template v-else-if="item.picture_two" #default="{ row }">
+              <el-image
+                :src="row.pic_two"
+                style="width: 42px; height: 42px"
+              >
+                <div slot="error" class="image-slot">
+                  <img src="@/assets/companyFile/avatar.png" alt="" />
+                </div>
+              </el-image>
+            </template>
+          </el-table-column>
+        </template>
+      </template>
+      <!-- 是否需要操作单元格 -->
+      <el-table-column
+        v-if="table_operation"
+        :label="operation_label"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="small"
+            class="operation_btn"
+            @click="open(scope.row)"
+            >{{ operation_text }}</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table_pagination" :style="pagination_style">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="page_sizes"
+        :pager-count="5"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "lkyTable",
+  props: {
+    // 本组件盒子宽
+    table_pagination_width: {
+      type: String,
+      default: "",
+    },
+    // 本组件盒子高
+    table_pagination_height: {
+      type: String,
+      default: "",
+    },
+    // 表格数据
+    table_data: {
+      type: Array,
+      default: () => [],
+    },
+    // 表格高度
+    table_height: {
+      type: String,
+      default: "",
+    },
+    // 是否需要选择表格行数据
+    table_select: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否需要表格序号
+    table_index: {
+      type: Boolean,
+      default: false,
+    },
+    // 单元格名称
+    table_columns: {
+      type: Array,
+      default: () => [],
+    },
+    // 是否需要操作单元格
+    table_operation: {
+      type: Boolean,
+      default: false,
+    },
+    // 操作单元格表头名
+    operation_label: {
+      type: String,
+      default: "",
+    },
+    // 操作单元格按钮名称
+    operation_text: {
+      type: String,
+      default: "",
+    },
+    // 分页可选页数类型
+    page_sizes: {
+      type: Array,
+      default: () => [],
+    },
+    // 每页多少条
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    // 当前多少页
+    pageNum: {
+      type: Number,
+      default: 0,
+    },
+    // 数据总条数
+    total: {
+      type: Number,
+      default: 0,
+    },
+    // 分页盒子宽,分页盒子高固定
+    pagination_width: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // 根据实际页面需求确定整体盒子宽高
+    table_pagination_style() {
+      return {
+        "--table_pagination-width": this.table_pagination_width + "vw",
+        "--table_pagination-height": this.table_pagination_height + "vh",
+      };
+    },
+    // 根据实际页面需求确定分页盒子宽度
+    pagination_style() {
+      return {
+        "--pagination-width": this.pagination_width + "vw",
+      };
+    },
+  },
+  methods: {
+    // 操作单元格点击事件,由调用该组件的父组件执行 方法名定义成open_event
+    open(row) {
+      this.$emit("open_event", row);
+    },
+    // 如果二级表格需要展示照片的话
+    get_child_img_url(row) {
+      this.$emit("get_child_img_url", row);
+    },
+    // 如果一级表格需要展示照片的话
+    get_img_url(row) {
+      this.$emit("get_img_url", row);
+    },
+    // 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
+    handle_size_change(val) {
+      this.$emit("size_change", val);
+    },
+    // 前往哪一页 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成nun_change
+    handle_current_change(val) {
+      this.$emit("num_change", val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.table_pagination_body {
+  margin-top: 1vh;
+  margin-left: 0.4vw;
+  width: var(--table_pagination-width);
+  height: var(--table_pagination-height);
+}
+/* 表格样式 */
+/deep/.lky_table.el-table {
+  background: rgba(0, 0, 0, 0);
+  border: 0.1px solid #3f5564;
+  thead {
+    color: #fff;
+    font-weight: 500;
+    border: 0.1px solid #3f5564;
+    background: linear-gradient(
+      to right,
+      #284f49,
+      #2f6363 5%,
+      #233b38 80%
+    ) !important;
+
+    & th {
+      background-color: transparent;
+    }
+
+    & tr {
+      background-color: transparent;
+    }
+  }
+  tr {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+/* 单元格边框样式 */
+/deep/.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/* 单元格边框样式 */
+/deep/.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/deep/.el-table--border th.el-table__cell,
+.el-table__fixed-right-patch {
+  border: 0.1px solid #3f5564;
+}
+/* 表格右侧白线取消 */
+/deep/.el-table--border::after,
+.el-table--group::after {
+  width: 0px;
+}
+/* 表格内容过长时进度条盒子样式 */
+/deep/.el-table__body-wrapper::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+/* 表格内容过长时进度条样式 */
+/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+/* 表格操作单元格按钮样式 */
+/deep/.el-button.operation_btn {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+}
+/* 表格操作单元格按钮操作时样式 */
+/deep/.el-button.operation_btn:hover,
+.el-button.operation_btn:focus {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+}
+.table_pagination {
+  width: var(--pagination-width);
+  height: 5vh;
+  display: flex;
+  flex-direction: row-reverse;
+  /deep/.el-input--suffix .el-input__inner {
+    color: #fff;
+    border: 0.1px solid #34a6a6;
+    border-radius: 0px;
+    background: rgba(0, 0, 0, 0);
+    width: 5vw;
+    height: 2.6vh;
+    line-height: 2.6vh;
+  }
+  /deep/.el-input__icon {
+    color: #fff;
+    line-height: 2.6vh;
+    height: 2.6vh;
+  }
+  /deep/.el-pagination {
+    margin-top: 1vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    .el-input__inner {
+      border-radius: 0px;
+      background: #3c4b4a;
+      border: 0.1px solid #277f79;
+      color: #fff;
+      height: 2.6vh;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      background: #3c4b4a;
+      border: 0.1px solid #277f79;
+      color: #fff;
+      height: 2.6vh;
+    }
+    ul {
+      li {
+        border: 0.1px solid #277f79;
+        background: #3c4b4a;
+        color: #fff;
+        height: 2.6vh;
+      }
+    }
+    .btn-next {
+      border: 0.1px solid #277f79;
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+      height: 2.6vh;
+    }
+    .el-pager {
+      li {
+        background: #3c4b4a !important;
+      }
+    }
+    .el-pagination__jump {
+      height: 2.6vh;
+      line-height: 2.6vh;
+      color: #fff;
+    }
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    border: 0.1px solid #76eae4;
+  }
+}
+</style>

src/main.js

@@ -6,10 +6,11 @@ import router from './router'
 import store from './store'
 import Message from './components/message';
 import erupload from "./components/upload";
+import lkyTable from "./components/publicModule/lkyTable" // 本组件样式包含普通表格、分页
 Vue.use(ElementUI);
 Vue.use(Message)
 Vue.component('erupload', erupload)
-
+Vue.component('lkyTable', lkyTable)
 const vm = new Vue({
   el: '#app',
   router,

src/router/index.js

@@ -67,12 +67,17 @@ const routes = [
             name: 'closeLoopDispose',
             component: () => import('@/views/closeLoopDispose'),
           },
-          // 应用超市
+          // 安商惠企
           {
             path:'applySupermarket',
             name:'applySupermarket',
             component: () => import('@/views/applySupermarket'),
           },
+          {
+            path:'module',
+            name:'module',
+            component: () => import('@/views/module'),
+          },
         ]
       },
       {

src/views/module/index.vue

@@ -0,0 +1,175 @@
+<!-- 仅做模块化展示使用 -->
+<template>
+  <div>
+    <lkyTable
+      :table_pagination_width="table_pagination_width"
+      :table_pagination_height="table_pagination_height"
+      :table_data="table_data"
+      :table_height="table_height"
+      :table_select="table_select"
+      :table_index="table_index"
+      :table_columns="table_columns"
+      :table_operation="table_operation"
+      :operation_label="operation_label"
+      :operation_text="operation_text"
+      :page_sizes="page_sizes"
+      :pageSize="pageSize"
+      :pageNum="pageNum"
+      :total="total"
+      @open_event="open_event"
+      @size_change="size_change"
+      @num_change="num_change"
+    ></lkyTable>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      table_pagination_width: "60",
+      table_pagination_height: "60",
+      table_data: [
+        {
+          company: "宁波保润有限石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child:'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "四级",
+          pic_child:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child:'1222.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "三级",
+          pic_child:'1222.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child:'1222.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "二级",
+          pic:'1000.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child:'1222.png',
+        },
+      ],
+      table_height: "592", // 表格高度根据实际场景确定高度
+      table_select: false,
+      table_index: true,
+      table_columns: [
+        {
+          prop: "company_all",
+          label: "公司全览",
+          children: [
+            {
+              prop: "company",
+              label: "公司名称",
+              width: "180",
+            },
+            {
+              prop: "personPic",
+              label: "个人照片",
+              width: "120",
+              picture: true,
+            },
+            {
+              prop: "personNum",
+              label: "公司人数",
+              width: "120",
+            },
+            {
+              prop: "idcard",
+              label: "公司id",
+              width: "90",
+            },
+            {
+              prop: "unit",
+              label: "公司单位",
+              width: "180",
+            },
+          ],
+        },
+        {
+          prop: "level",
+          label: "公司等级",
+          width: "80",
+        },
+        {
+          prop: "pic",
+          label: "公司照片",
+          width: "120",
+          picture: true,
+        },
+        {
+          prop: "person_pic",
+          label: "个人照片",
+          width: "100",
+          picture_two: true,
+        },
+      ],
+      table_operation: true,
+      operation_label: "操作",
+      operation_text: "详情",
+      page_sizes: [4, 6],
+      pageSize: 4,
+      pageNum: 1,
+      total: 8,
+      pagination_width: "60",
+    };
+  },
+  methods: {
+    get_search() {
+      console.log("123");
+    },
+    // 表格详情点击事件
+    open_event(row) {
+      console.log("row456", row);
+    },
+    // 分页--每页多少条
+    size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.get_search();
+    },
+    // 分页--前往哪一页
+    num_change(val) {
+      this.pageNum = val;
+      this.get_search();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+</style>