devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

el-table组件的封装_el-table封装

作者：我家小花儿 | 2024-05-25 10:13:56

赞

踩

el-table封装

前言：仔细看懂本篇博客，玩转element table 不成问题 ，个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。

其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。

就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。
该组件封装适应于绝大多数table列表，可以自定义列

废话不多说看下例子

先上子组件代码 

  1. <template>
  2.   <div class="table-box">
  3.     <el-table
  4.       ref="tableData"
  5.       v-loading="loading"
  6.       :row-key="rowKey"
  7.       :style="{ width: '100%', fontSize: fontSize + 'px' }"
  8.       :show-header="showHeader"
  9.       :data="tableData"
  10.       :height="tableHeight"
  11.       :summary-method="getSummaries"
  12.       :show-summary="showSummary"
  13.       :cell-style="cellStyle"
  14.       :cell-class-name="tableCellClassName"
  15.       :span-method="arraySpanMethod"
  16.       :border="border"
  17.       size="default"
  18.       :highlight-current-row="highlightCurrentRow"
  19.       v-bind="tableInfo"
  20.       :stripe="isStripe"
  21.       v-on="events"
  22.     >
  23.       <slot name="expand" />
  24.       <!-- 多选 -->
  25.       <el-table-column
  26.         v-if="needSelect"
  27.         :selectable="selectable"
  28.         type="selection"
  29.         width="55"
  30.         :reserve-selection="isReserve"
  31.       />
  32.       <el-table-column v-if="hasIndex" label="序号" width="50" type="index" />
  33.       <template v-for="(item, index) in tableColumn">
  34.         <!-- 此列需要自定义 notTooltip  超出行是否隐藏 -->
  35.         <el-table-column
  36.           v-if="item.isSlot"
  37.           :key="'%' + index"
  38.           :show-overflow-tooltip="!item.notTooltip"
  39.           v-bind="item"
  40.           v-on="events"
  41.         >
  42.           <template slot-scope="{ row, $index }">
  43.             <ex-slot
  44.               v-if="item.render"
  45.               :render="item.render"
  46.               :row="row"
  47.               :index="$index"
  48.               :column="item"
  49.               :class="item.prop"
  50.               :default-value="item.defaultValue"
  51.             />
  52.             <slot v-else :name="item.prop" :row="row" />
  53.           </template>
  54.         </el-table-column>
  55.         <!-- 正常列 -->
  56.         <el-table-column
  57.           v-else
  58.           :key="'%' + index"
  59.           show-overflow-tooltip
  60.           v-bind="item"
  61.           v-on="events"
  62.         />
  63.       </template>
  64.       <el-table-column
  65.         v-if="hasOperation"
  66.         label="操作"
  67.         :min-width="operationWidth"
  68.         :fixed="fixed"
  69.         align="center"
  70.       >
  71.         <!-- <template v-if="!btnButton || btnButton.length === 0" slot-scope="scope">
  72.           <slot name="operation" :row="scope.row" :index="scope.$index" />
  73.         </template> -->
  74.         <template v-if="btnButton.length" slot-scope="{ row, column, $index }">
  75.           <el-button
  76.             v-for="(value, i) in btnButton"
  77.             :key="'$' + i"
  78.             :style="{ fontSize: fontSize + 'px' }"
  79.             size="small"
  80.             :type="value.type"
  81.             :icon="value.icon"
  82.             :class="value.class"
  83.             :disabled="value.disabled && value.disabled(row, column, $index)"
  84.             @click.stop="value.callback(row, column, $index)"
  85.           >
  86.             {{ value.text }}
  87.           </el-button>
  88.         </template>
  89.       </el-table-column>
  90.       <!-- 只针对团队会诊页面 吧v-else关闭 -->
  91.     </el-table>
  92.     <!-- 分页 -->
  93.     <div
  94.       v-if="isNeedPagination"
  95.       style="display: flex; justify-content: flex-end; align-item: centerl; padding-top: 15px"
  96.     >
  97.       <el-pagination
  98.         ref="pagination"
  99.         :page-sizes="pageSizes"
  100.         :page-size.sync="computedPageSize"
  101.         :hide-on-single-page="isSinglePageHide"
  102.         layout="total, sizes, prev, pager, next, jumper"
  103.         :current-page.sync="computedCurrentPage"
  104.         :total="total"
  105.         :small="small"
  106.         :pager-count="pagerCount"
  107.         @current-change="currentChange"
  108.         @size-change="sizeChange"
  109.       />
  110.     </div>
  111.   </div>
  112. </template>
  113. <script>
  114. import store from '@/store'
  115. import { mapState } from 'vuex'
  116. // 自定义组件的内容
  117. const exSlot = {
  118.   functional: true,
  119.   props: {
  120.     row: Object,
  121.     render: Function,
  122.     index: Number,
  123.     column: {
  124.       type: Object,
  125.       default: null
  126.     },
  127.     defaultValue: [Number, String]
  128.   },
  129.  
  130.   render: (h, ctx) => {
  131.     const params = {
  132.       row: ctx.props.row,
  133.       index: ctx.props.index
  134.     }
  135.     const defaultValue = ctx.props.defaultValue
  136.     params.column = ctx.props.column || {}
  137.     return h(
  138.       'div',
  139.       {
  140.         class: [
  141.           params.column.prop || '',
  142.           params.column.class || params.column.className || ''
  143.         ].join('')
  144.       },
  145.       [ctx.props.render(h, params) || defaultValue]
  146.     )
  147.   }
  148. }
  149. export default {
  150.   name: 'PublicTable',
  151.   components: {
  152.     'ex-slot': exSlot
  153.   },
  154.   props: {
  155.     // key（唯一key值，和reserve-selection搭配使用）
  156.     rowKey: {
  157.       type: [Object, Function],
  158.       default: () => ({})
  159.     },
  160.     // 多选框是否记住上一页数据(必须与row-key唯一值搭配使用)
  161.     isReserve: {
  162.       type: Boolean,
  163.       default: false
  164.     },
  165.     // 单元格的 style 的回调方法
  166.     cellStyle: {
  167.       type: [Object, Function],
  168.       default: () => ({})
  169.     },
  170.     small: {
  171.       type: Boolean,
  172.       default: false
  173.     },
  174.     pagerCount: {
  175.       type: Number,
  176.       default: 7
  177.     },
  178.     // 是否显示表头
  179.     showHeader: {
  180.       type: Boolean,
  181.       default: true
  182.     },
  183.     // 是否显示合计
  184.     showSummary: {
  185.       type: Boolean,
  186.       default: false
  187.     },
  188.     // 是否要高亮当前行
  189.     highlightCurrentRow: {
  190.       type: Boolean,
  191.       default: true
  192.     },
  193.     // 自定义的合计计算方法
  194.     getSummaries: {
  195.       type: Function,
  196.       default: () => {}
  197.     },
  198.     // 获取表格行列索引值
  199.     tableCellClassName: {
  200.       type: Function,
  201.       default: () => {}
  202.     },
  203.     // 合并行或列
  204.     arraySpanMethod: {
  205.       type: Function,
  206.       default: () => {}
  207.     },
  208.     // 是否需要多选
  209.     needSelect: {
  210.       type: Boolean,
  211.       default: false
  212.     },
  213.     // 是否select需要特殊判断
  214.     selectable: {
  215.       type: Function,
  216.       default: () => {
  217.         return true
  218.       }
  219.     },
  220.     // 是否需要序号
  221.     hasIndex: {
  222.       type: Boolean,
  223.       default: false
  224.     },
  225.     // 默认是否选中第一列
  226.     isSetCurrentRow: {
  227.       type: Boolean,
  228.       default: false
  229.     },
  230.     // 是否需要分页
  231.     isNeedPagination: {
  232.       type: Boolean,
  233.       default: false
  234.     },
  235.     // 是否单页隐藏，默认为true
  236.     isSinglePageHide: {
  237.       type: Boolean,
  238.       default: false
  239.     },
  240.     // 当前页页码，支持.sync修饰符
  241.     currentPage: {
  242.       type: Number,
  243.       default: 1
  244.     },
  245.     // 每页数据条数, 支持.sync修饰符默认为每页10条
  246.     pageSize: {
  247.       type: Number,
  248.       default: 20
  249.     },
  250.     // 数据总条数
  251.     total: {
  252.       type: Number,
  253.       default: 0
  254.     },
  255.     // 每页多少数据
  256.     pageSizes: {
  257.       type: Array,
  258.       required: false,
  259.       default: () => [20, 40, 80, 100]
  260.     },
  261.     tableInfo: {
  262.       type: Object,
  263.       default: () => {}
  264.     },
  265.     // 获取数据时是否需要加载loading
  266.     loading: {
  267.       type: Boolean,
  268.       default: false
  269.     },
  270.     tableData: {
  271.       type: Array,
  272.       default: () => []
  273.     },
  274.     // 表格展示数据
  275.     tableColumn: {
  276.       type: Array,
  277.       default: () => []
  278.     },
  279.     // 是否需要操作列
  280.     hasOperation: {
  281.       type: Boolean,
  282.       default: true
  283.     },
  284.     // 是否需要边框
  285.     border: {
  286.       type: Boolean,
  287.       default: false
  288.     },
  289.     // 操作列
  290.     btnButton: {
  291.       type: Array,
  292.       default: () => []
  293.     },
  294.     // 操作列宽度
  295.     operationWidth: {
  296.       type: String,
  297.       default: '60px'
  298.     },
  299.     // 操作
  300.     fixed: {
  301.       type: [Boolean, String],
  302.       default: false
  303.     },
  304.     // 表格方法
  305.     events: {
  306.       type: Object,
  307.       default: () => {}
  308.     },
  309.     // 是否为斑马纹 table
  310.     isStripe: {
  311.       type: Boolean,
  312.       default: false
  313.     }
  314.   },
  315.   data() {
  316.     return {
  317.       fontSize: sessionStorage.getItem('fontSize') || ''
  318.     }
  319.   },
  320.   // data() {
  321.   //   return {
  322.   //     // eslint-disable-next-line vue/no-dupe-keys
  323.   //     tableData: []
  324.   //   }
  325.   // },
  326.   computed: {
  327.     computedCurrentPage: {
  328.       get() {
  329.         return this.currentPage
  330.       },
  331.       set(val) {
  332.         this.$emit('update:currentPage', val)
  333.       }
  334.     },
  335.     computedPageSize: {
  336.       get() {
  337.         return this.pageSize
  338.       },
  339.       set(val) {
  340.         this.$emit('update:pageSize', val)
  341.       }
  342.     },
  343.     tableHeight() {
  344.       console.log('height', !this.isNeedPagination ? '100%' : 'calc(100% - 47px)')
  345.       return !this.isNeedPagination ? '100%' : 'calc(100% - 47px)'
  346.     },
  347.     ...mapState({
  348.       diagnosisSize: state => state.app.diagnosisSize
  349.     })
  350.   },
  351.   watch: {
  352.     '$parent.activeName'() {
  353.       this.$nextTick(() => {
  354.         this.$refs.tableData.doLayout()
  355.       })
  356.     },
  357.     diagnosisSize: {
  358.       handler(newValue) {
  359.         this.fontSize = newValue
  360.       }
  361.     }
  362.   },
  363.   mounted() {
  364.     if (this.isSetCurrentRow) {
  365.       setTimeout(() => {
  366.         this.$refs.tableData.setCurrentRow(this.tableData[0])
  367.       }, 500)
  368.     }
  369.   },
  370.   methods: {
  371.     // 页面切换事件  通过 @currentChange 绑定
  372.     currentChange(val) {
  373.       this.$emit('currentChange', val)
  374.     },
  375.     // 每页条数切换事件，通过@sizeChange 绑定
  376.     sizeChange(val) {
  377.       this.$emit('sizeChange', val)
  378.     },
  379.     getTableRef() {
  380.       return this.$refs.tableData
  381.     }
  382.   }
  383. }
  384. </script>
  385. <style lang="scss" scoped>
  386. .table-box {
  387.   flex: 1;
  388.   overflow: hidden;
  389.   width: 100%;
  390.   height: 100%;
  391. }
  392.  
  393. ::v-deep .el-table {
  394.   border: 1px solid #dfe6ec;
  395. }
  396.  
  397. ::v-deep .el-table th {
  398.   padding: 0;
  399.   height: 40px;
  400.   background: #f2f4fa;
  401.   box-shadow: 0px 1px 0px 0px #ebedf0;
  402.   // color: #191f25;
  403.   color: #000;
  404.   font-weight: 400;
  405. }
  406.  
  407. ::v-deep .el-table td {
  408.   padding: 0;
  409.   height: 40px;
  410. }
  411.  
  412. ::v-deep .el-table {
  413.   width: 100%;
  414.  
  415.   .el-table__header-wrapper table,
  416.   .el-table__body-wrapper table {
  417.     // width: 100% !important;
  418.   }
  419.  
  420.   .el-table__body,
  421.   .el-table__footer,
  422.   .el-table__header {
  423.     // table-layout: auto;
  424.   }
  425.   .maxMinBtn {
  426.     padding: 0 5px;
  427.   }
  428. }
  429. ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  430.   background-color: #e6f3e2;
  431. }
  432. ::v-deep .el-table__body tr.current-row {
  433.   .flex_div {
  434.     background: rgba(21, 91, 212, 0.3) !important;
  435.   }
  436.   td {
  437.     background: rgba(21, 91, 212, 0.3) !important;
  438.   }
  439.   td {
  440.     background: rgba(21, 91, 212, 0.2) !important;
  441.   }
  442. }
  443. </style>

再上父组件代码

  1. <template>
  2.   <div class="tableBox">
  3.     <PublicTable
  4.       ref="zhenDuanWHTable"
  5.       class="table"
  6.       :loading="loading"
  7.       :current-page="searchParams.pageNum"
  8.       :total="total"
  9.       :page-size="searchParams.pageSize"
  10.       :table-data="tableData"
  11.       :table-info="tableInfo"
  12.       :table-column="columns"
  13.       :btn-button="operations"
  14.       :events="events"
  15.       operation-width="150px"
  16.       @sizeChange="handleSizeChange"
  17.       @currentChange="handleCurrentChange"
  18.     />
  19.   </div>
  20. </template>
  21.  
  22. <script>
  23. import tableInfo from './mixins/tableInfo.js'
  24. import PublicTable from '@/components/PublicTable/index.vue'
  25. export default {
  26.   components: {
  27.     PublicTable
  28.   },
  29.   mixins: [tableInfo],
  30.   data() {
  31.     return {}
  32.   },
  33.   methods: {}
  34. }
  35. </script>
  36.  
  37. <style lang="scss" scoped>
  38. .tableBox {
  39.   display: flex;
  40.   flex-direction: column;
  41.   width: 100%;
  42.   height: 600px;
  43.   .table {
  44.     height: calc(100% - 48px);
  45.   }
  46. }
  47. </style>

再上mixins/tableInfo.js代码

  1. import mockData from './mockData'
  2. export default {
  3.   data() {
  4.     return {
  5.       // 获取列表前是否loading加载
  6.       loading: false,
  7.       // 搜索查询的参数
  8.       searchParams: {
  9.         pageNum: 1,
  10.         pageSize: 10
  11.       },
  12.       // table数据源
  13.       tableData: mockData,
  14.       // 表格项绑定的属性
  15.       columns: [
  16.         {
  17.           prop: 'title',
  18.           label: '审核描述',
  19.           minWidth: '100px',
  20.           align: 'center',
  21.           formatter: row => (row.title ? row.title : '暂无标题')
  22.         },
  23.         {
  24.           prop: 'statusDesc',
  25.           minWidth: '100px',
  26.           align: 'center',
  27.           label: '审核状态'
  28.         },
  29.         {
  30.           prop: 'createBy',
  31.           minWidth: '100px',
  32.           align: 'center',
  33.           label: '申请人'
  34.         },
  35.         {
  36.           sortable: 'custom',
  37.           prop: 'createdTime',
  38.           minWidth: '100px',
  39.           align: 'center',
  40.           label: '申请时间'
  41.         },
  42.         {
  43.           prop: 'auditBy',
  44.           minWidth: '100px',
  45.           align: 'center',
  46.           label: '审核人'
  47.         },
  48.         {
  49.           minWidth: '100px',
  50.           align: 'center',
  51.           prop: 'auditTime',
  52.           label: '审核时间'
  53.         },
  54.         {
  55.           minWidth: '100px',
  56.           align: 'center',
  57.           prop: 'A',
  58.           label: '审核时间'
  59.         },
  60.         {
  61.           minWidth: '100px',
  62.           align: 'center',
  63.           prop: 'B',
  64.           label: '审核时间'
  65.         },
  66.         {
  67.           minWidth: '100px',
  68.           align: 'center',
  69.           prop: 'C',
  70.           label: '审核时间'
  71.         },
  72.         {
  73.           minWidth: '100px',
  74.           align: 'center',
  75.           prop: 'D',
  76.           label: '审核时间'
  77.         },
  78.         {
  79.           minWidth: '100px',
  80.           align: 'center',
  81.           prop: 'E',
  82.           label: '审核时间'
  83.         },
  84.         {
  85.           minWidth: '100px',
  86.           align: 'center',
  87.           prop: 'E',
  88.           label: '审核时间'
  89.         },
  90.         {
  91.           minWidth: '100px',
  92.           align: 'center',
  93.           prop: 'E',
  94.           label: '审核时间'
  95.         },
  96.         {
  97.           minWidth: '100px',
  98.           align: 'center',
  99.           prop: 'E',
  100.           label: '审核时间'
  101.         },
  102.         {
  103.           minWidth: '100px',
  104.           align: 'center',
  105.           prop: 'E',
  106.           label: '审核时间'
  107.         },
  108.         {
  109.           minWidth: '100px',
  110.           align: 'center',
  111.           prop: 'E',
  112.           label: '审核时间'
  113.         },
  114.         {
  115.           minWidth: '100px',
  116.           align: 'center',
  117.           prop: 'E',
  118.           label: '审核时间'
  119.         },
  120.         {
  121.           minWidth: '100px',
  122.           align: 'center',
  123.           prop: 'E',
  124.           label: '审核时间'
  125.         },
  126.         {
  127.           minWidth: '100px',
  128.           align: 'center',
  129.           prop: 'E',
  130.           label: '审核时间'
  131.         },
  132.         {
  133.           minWidth: '100px',
  134.           align: 'center',
  135.           prop: 'E',
  136.           label: '审核时间'
  137.         },
  138.         {
  139.           minWidth: '100px',
  140.           align: 'center',
  141.           prop: 'E',
  142.           label: '审核时间'
  143.         },
  144.         {
  145.           minWidth: '100px',
  146.           align: 'center',
  147.           prop: 'E',
  148.           label: '审核时间'
  149.         }
  150.       ],
  151.       // 表格绑定的属性
  152.       tableInfo: {
  153.         stripe: true,
  154.         'highlight-current-row': true // 选中行高亮
  155.       },
  156.       events: {
  157.         'row-dblclick': row => {
  158.           //双击表格项触发的函数
  159.           console.log(row)
  160.         },
  161.         'row-click': row => {
  162.           // 单机表格项触发的函数
  163.           console.log('row', row)
  164.         }
  165.       },
  166.       // 操作列
  167.       operations: [
  168.         {
  169.           text: '编辑',
  170.           isShow: row => true, // 是否展示
  171.           isDisable: row => true, // 是否禁用
  172.           type: 'text',
  173.           class: 'el-text-color',
  174.           callback: row => {
  175.             this.handleAddOrEdit('edit', row)
  176.           }
  177.         }
  178.       ],
  179.       total: 0
  180.     }
  181.   },
  182.   mounted() {},
  183.   methods: {
  184.     // 每也条数改变
  185.     handleSizeChange(pageSize) {
  186.       this.searchParams.pageSize = pageSize
  187.     },
  188.     // 改变页数
  189.     handleCurrentChange(pageNum) {
  190.       this.searchParams.pageNum = pageNum
  191.     },
  192.     handleAddOrEdit(type, row) {
  193.       if (type === 'edit') {
  194.         this.visible = true
  195.         this.infoData = row
  196.       }
  197.     }
  198.   }
  199. }

假数据mockData（不用管）

  1. export default [
  2.   {
  3.     title: 'A',
  4.     statusDesc: 1,
  5.     createBy: '甲',
  6.     createdTime: '2023-01-01 23:59:59',
  7.     auditBy: '乙',
  8.     auditTime: '2023-01-02 23:59:59'
  9.   },
  10.   {
  11.     title: 'A',
  12.     statusDesc: 1,
  13.     createBy: '甲',
  14.     createdTime: '2023-01-01 23:59:59',
  15.     auditBy: '乙',
  16.     auditTime: '2023-01-02 23:59:59'
  17.   },
  18.   {
  19.     title: 'A',
  20.     statusDesc: 1,
  21.     createBy: '甲',
  22.     createdTime: '2023-01-01 23:59:59',
  23.     auditBy: '乙',
  24.     auditTime: '2023-01-02 23:59:59'
  25.   },
  26.   {
  27.     title: 'A',
  28.     statusDesc: 1,
  29.     createBy: '甲',
  30.     createdTime: '2023-01-01 23:59:59',
  31.     auditBy: '乙',
  32.     auditTime: '2023-01-02 23:59:59'
  33.   },
  34.   {
  35.     title: 'A',
  36.     statusDesc: 1,
  37.     createBy: '甲',
  38.     createdTime: '2023-01-01 23:59:59',
  39.     auditBy: '乙',
  40.     auditTime: '2023-01-02 23:59:59'
  41.   },
  42.   {
  43.     title: 'A',
  44.     statusDesc: 1,
  45.     createBy: '甲',
  46.     createdTime: '2023-01-01 23:59:59',
  47.     auditBy: '乙',
  48.     auditTime: '2023-01-02 23:59:59'
  49.   },
  50.   {
  51.     title: 'A',
  52.     statusDesc: 1,
  53.     createBy: '甲',
  54.     createdTime: '2023-01-01 23:59:59',
  55.     auditBy: '乙',
  56.     auditTime: '2023-01-02 23:59:59'
  57.   },
  58.   {
  59.     title: 'A',
  60.     statusDesc: 1,
  61.     createBy: '甲',
  62.     createdTime: '2023-01-01 23:59:59',
  63.     auditBy: '乙',
  64.     auditTime: '2023-01-02 23:59:59'
  65.   },
  66.   {
  67.     title: 'A',
  68.     statusDesc: 1,
  69.     createBy: '甲',
  70.     createdTime: '2023-01-01 23:59:59',
  71.     auditBy: '乙',
  72.     auditTime: '2023-01-02 23:59:59'
  73.   },
  74.   {
  75.     title: 'A',
  76.     statusDesc: 1,
  77.     createBy: '甲',
  78.     createdTime: '2023-01-01 23:59:59',
  79.     auditBy: '乙',
  80.     auditTime: '2023-01-02 23:59:59'
  81.   },
  82.   {
  83.     title: 'A',
  84.     statusDesc: 1,
  85.     createBy: '甲',
  86.     createdTime: '2023-01-01 23:59:59',
  87.     auditBy: '乙',
  88.     auditTime: '2023-01-02 23:59:59'
  89.   },
  90.   {
  91.     title: 'A',
  92.     statusDesc: 1,
  93.     createBy: '甲',
  94.     createdTime: '2023-01-01 23:59:59',
  95.     auditBy: '乙',
  96.     auditTime: '2023-01-02 23:59:59'
  97.   },
  98.   {
  99.     title: 'A',
  100.     statusDesc: 1,
  101.     createBy: '甲',
  102.     createdTime: '2023-01-01 23:59:59',
  103.     auditBy: '乙',
  104.     auditTime: '2023-01-02 23:59:59'
  105.   },
  106.   {
  107.     title: 'A',
  108.     statusDesc: 1,
  109.     createBy: '甲',
  110.     createdTime: '2023-01-01 23:59:59',
  111.     auditBy: '乙',
  112.     auditTime: '2023-01-02 23:59:59'
  113.   },
  114.   {
  115.     title: 'A',
  116.     statusDesc: 1,
  117.     createBy: '甲',
  118.     createdTime: '2023-01-01 23:59:59',
  119.     auditBy: '乙',
  120.     auditTime: '2023-01-02 23:59:59'
  121.   },
  122.   {
  123.     title: 'A',
  124.     statusDesc: 1,
  125.     createBy: '甲',
  126.     createdTime: '2023-01-01 23:59:59',
  127.     auditBy: '乙',
  128.     auditTime: '2023-01-02 23:59:59'
  129.   },
  130.   {
  131.     title: 'A',
  132.     statusDesc: 1,
  133.     createBy: '甲',
  134.     createdTime: '2023-01-01 23:59:59',
  135.     auditBy: '乙',
  136.     auditTime: '2023-01-02 23:59:59'
  137.   },
  138.   {
  139.     title: 'A',
  140.     statusDesc: 1,
  141.     createBy: '甲',
  142.     createdTime: '2023-01-01 23:59:59',
  143.     auditBy: '乙',
  144.     auditTime: '2023-01-02 23:59:59'
  145.   },
  146.   {
  147.     title: 'A',
  148.     statusDesc: 1,
  149.     createBy: '甲',
  150.     createdTime: '2023-01-01 23:59:59',
  151.     auditBy: '乙',
  152.     auditTime: '2023-01-02 23:59:59'
  153.   },
  154.   {
  155.     title: 'A',
  156.     statusDesc: 1,
  157.     createBy: '甲',
  158.     createdTime: '2023-01-01 23:59:59',
  159.     auditBy: '乙',
  160.     auditTime: '2023-01-02 23:59:59'
  161.   },
  162.   {
  163.     title: 'A',
  164.     statusDesc: 1,
  165.     createBy: '甲',
  166.     createdTime: '2023-01-01 23:59:59',
  167.     auditBy: '乙',
  168.     auditTime: '2023-01-02 23:59:59'
  169.   },
  170.   {
  171.     title: 'A',
  172.     statusDesc: 1,
  173.     createBy: '甲',
  174.     createdTime: '2023-01-01 23:59:59',
  175.     auditBy: '乙',
  176.     auditTime: '2023-01-02 23:59:59'
  177.   },
  178.   {
  179.     title: 'A',
  180.     statusDesc: 1,
  181.     createBy: '甲',
  182.     createdTime: '2023-01-01 23:59:59',
  183.     auditBy: '乙',
  184.     auditTime: '2023-01-02 23:59:59'
  185.   },
  186.   {
  187.     title: 'A',
  188.     statusDesc: 1,
  189.     createBy: '甲',
  190.     createdTime: '2023-01-01 23:59:59',
  191.     auditBy: '乙',
  192.     auditTime: '2023-01-02 23:59:59'
  193.   },
  194.   {
  195.     title: 'A',
  196.     statusDesc: 1,
  197.     createBy: '甲',
  198.     createdTime: '2023-01-01 23:59:59',
  199.     auditBy: '乙',
  200.     auditTime: '2023-01-02 23:59:59'
  201.   },
  202.   {
  203.     title: 'A',
  204.     statusDesc: 1,
  205.     createBy: '甲',
  206.     createdTime: '2023-01-01 23:59:59',
  207.     auditBy: '乙',
  208.     auditTime: '2023-01-02 23:59:59'
  209.   },
  210.   {
  211.     title: 'A',
  212.     statusDesc: 1,
  213.     createBy: '甲',
  214.     createdTime: '2023-01-01 23:59:59',
  215.     auditBy: '乙',
  216.     auditTime: '2023-01-02 23:59:59'
  217.   },
  218.   {
  219.     title: 'A',
  220.     statusDesc: 1,
  221.     createBy: '甲',
  222.     createdTime: '2023-01-01 23:59:59',
  223.     auditBy: '乙',
  224.     auditTime: '2023-01-02 23:59:59'
  225.   },
  226.   {
  227.     title: 'A',
  228.     statusDesc: 1,
  229.     createBy: '甲',
  230.     createdTime: '2023-01-01 23:59:59',
  231.     auditBy: '乙',
  232.     auditTime: '2023-01-02 23:59:59'
  233.   },
  234.   {
  235.     title: 'A',
  236.     statusDesc: 1,
  237.     createBy: '甲',
  238.     createdTime: '2023-01-01 23:59:59',
  239.     auditBy: '乙',
  240.     auditTime: '2023-01-02 23:59:59'
  241.   },
  242.   {
  243.     title: 'A',
  244.     statusDesc: 1,
  245.     createBy: '甲',
  246.     createdTime: '2023-01-01 23:59:59',
  247.     auditBy: '乙',
  248.     auditTime: '2023-01-02 23:59:59'
  249.   },
  250.   {
  251.     title: 'A',
  252.     statusDesc: 1,
  253.     createBy: '甲',
  254.     createdTime: '2023-01-01 23:59:59',
  255.     auditBy: '乙',
  256.     auditTime: '2023-01-02 23:59:59'
  257.   },
  258.   {
  259.     title: 'A',
  260.     statusDesc: 1,
  261.     createBy: '甲',
  262.     createdTime: '2023-01-01 23:59:59',
  263.     auditBy: '乙',
  264.     auditTime: '2023-01-02 23:59:59'
  265.   },
  266.   {
  267.     title: 'A',
  268.     statusDesc: 1,
  269.     createBy: '甲',
  270.     createdTime: '2023-01-01 23:59:59',
  271.     auditBy: '乙',
  272.     auditTime: '2023-01-02 23:59:59'
  273.   },
  274.   {
  275.     title: 'A',
  276.     statusDesc: 1,
  277.     createBy: '甲',
  278.     createdTime: '2023-01-01 23:59:59',
  279.     auditBy: '乙',
  280.     auditTime: '2023-01-02 23:59:59'
  281.   },
  282.   {
  283.     title: 'A',
  284.     statusDesc: 1,
  285.     createBy: '甲',
  286.     createdTime: '2023-01-01 23:59:59',
  287.     auditBy: '乙',
  288.     auditTime: '2023-01-02 23:59:59'
  289.   },
  290.   {
  291.     title: 'A',
  292.     statusDesc: 1,
  293.     createBy: '甲',
  294.     createdTime: '2023-01-01 23:59:59',
  295.     auditBy: '乙',
  296.     auditTime: '2023-01-02 23:59:59'
  297.   },
  298.   {
  299.     title: 'A',
  300.     statusDesc: 1,
  301.     createBy: '甲',
  302.     createdTime: '2023-01-01 23:59:59',
  303.     auditBy: '乙',
  304.     auditTime: '2023-01-02 23:59:59'
  305.   },
  306.   {
  307.     title: 'A',
  308.     statusDesc: 1,
  309.     createBy: '甲',
  310.     createdTime: '2023-01-01 23:59:59',
  311.     auditBy: '乙',
  312.     auditTime: '2023-01-02 23:59:59'
  313.   },
  314.   {
  315.     title: 'A',
  316.     statusDesc: 1,
  317.     createBy: '甲',
  318.     createdTime: '2023-01-01 23:59:59',
  319.     auditBy: '乙',
  320.     auditTime: '2023-01-02 23:59:59'
  321.   },
  322.   {
  323.     title: 'A',
  324.     statusDesc: 1,
  325.     createBy: '甲',
  326.     createdTime: '2023-01-01 23:59:59',
  327.     auditBy: '乙',
  328.     auditTime: '2023-01-02 23:59:59'
  329.   },
  330.   {
  331.     title: 'A',
  332.     statusDesc: 1,
  333.     createBy: '甲',
  334.     createdTime: '2023-01-01 23:59:59',
  335.     auditBy: '乙',
  336.     auditTime: '2023-01-02 23:59:59'
  337.   },
  338.   {
  339.     title: 'A',
  340.     statusDesc: 1,
  341.     createBy: '甲',
  342.     createdTime: '2023-01-01 23:59:59',
  343.     auditBy: '乙',
  344.     auditTime: '2023-01-02 23:59:59'
  345.   },
  346.   {
  347.     title: 'A',
  348.     statusDesc: 1,
  349.     createBy: '甲',
  350.     createdTime: '2023-01-01 23:59:59',
  351.     auditBy: '乙',
  352.     auditTime: '2023-01-02 23:59:59'
  353.   },
  354.   {
  355.     title: 'A',
  356.     statusDesc: 1,
  357.     createBy: '甲',
  358.     createdTime: '2023-01-01 23:59:59',
  359.     auditBy: '乙',
  360.     auditTime: '2023-01-02 23:59:59'
  361.   },
  362.   {
  363.     title: 'A',
  364.     statusDesc: 1,
  365.     createBy: '甲',
  366.     createdTime: '2023-01-01 23:59:59',
  367.     auditBy: '乙',
  368.     auditTime: '2023-01-02 23:59:59'
  369.   },
  370.   {
  371.     title: 'A',
  372.     statusDesc: 1,
  373.     createBy: '甲',
  374.     createdTime: '2023-01-01 23:59:59',
  375.     auditBy: '乙',
  376.     auditTime: '2023-01-02 23:59:59'
  377.   },
  378.   {
  379.     title: 'A',
  380.     statusDesc: 1,
  381.     createBy: '甲',
  382.     createdTime: '2023-01-01 23:59:59',
  383.     auditBy: '乙',
  384.     auditTime: '2023-01-02 23:59:59'
  385.   },
  386.   {
  387.     title: 'A',
  388.     statusDesc: 1,
  389.     createBy: '甲',
  390.     createdTime: '2023-01-01 23:59:59',
  391.     auditBy: '乙',
  392.     auditTime: '2023-01-02 23:59:59'
  393.   },
  394.   {
  395.     title: 'A',
  396.     statusDesc: 1,
  397.     createBy: '甲',
  398.     createdTime: '2023-01-01 23:59:59',
  399.     auditBy: '乙',
  400.     auditTime: '2023-01-02 23:59:59'
  401.   },
  402.   {
  403.     title: 'A',
  404.     statusDesc: 1,
  405.     createBy: '甲',
  406.     createdTime: '2023-01-01 23:59:59',
  407.     auditBy: '乙',
  408.     auditTime: '2023-01-02 23:59:59'
  409.   },
  410.   {
  411.     title: 'A',
  412.     statusDesc: 1,
  413.     createBy: '甲',
  414.     createdTime: '2023-01-01 23:59:59',
  415.     auditBy: '乙',
  416.     auditTime: '2023-01-02 23:59:59'
  417.   }
  418. ]

最后附上效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/621617
推荐阅读