vue3 | el-table表格二次封装_el-table封装

需求

1.统一样式，通过slot插槽而非json配置项的形式，来兼容原有table的template写法，方便改造
2.列的显示隐藏控制，默认根据接口数据是否有返回绑定prop对应的字段，来实现列的权限控制显隐，也可通过外部传tableHeader来自行控制
3.合并分页器

myTable.vue

<!--
 * @Description: 公共table组件，可含分页器
 * @使用方法：将<el-table>标签名替换为<my-table>即可, v-loading 指令需改为 :loading 绑定，其他所有属性方法的绑定和使用都和element-plus的table一致
 * @个别事项： 
    1. 使用分页器需绑定 showPagination， 并传一个json配置参数 paginationConfig, 除了 @size-change 和 @current-change 两个方法直接绑定在table上外，分页器的其他原有属性统一加到 paginationConfig
    2. tableHeader：默认只会渲染显示列表接口有返回的字段对应的prop列, 传了 tableHeader 则只会渲染 tableHeader 里有定义的字段列

 * @例：
    <my-table
      :loading="loading"
      :data="data"
      @selection-change="selectTableChange"
      @cell-click="selectRowFun"
      :multipleSelection="multipleSelection"
      showPagination
      :paginationConfig="paginationConfig"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="ages" label="年龄" width="150"></el-table-column>
    <my-table/>
-->

<template>
  <el-table 
    v-bind="$attrs" 
    ref="table" 
    v-loading="loading" 
    :data="data"
    :max-height="maxHeight"
    :paginationConfig="null"
  >
    <children :key="key" />
  </el-table>
  <div class="operation-bar">
    <div class="left-operation">
      <div class="checkedCount" v-if="showCheckedCount">已选 {{ multipleSelection.length }} 项</div>
      <div class="operation-box">
        <slot name="operation"></slot>
      </div>
    </div>
    <div class="right-pagination">
      <pagination v-if="showPagination" :pageConfig="_paginationConfig" @size-change="pageSizeChange" @current-change="currentPageChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    cloneVNode,
    Component,
    computed,
    reactive,
    ref,
    VNode,
    readonly,
    useSlots,
    defineExpose,
    watch,
    defineProps,
    defineEmits,
    useAttrs,
    nextTick,
    onMounted,
    onBeforeUnmount,
  } from 'vue'

  import pagination from './pagination.vue' // 分页组件
  // import useVirtualScroll from './useVirtualScroll'

  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    
    maxHeight: {
      type: [String, Number],
      default: 720,
    },

    data: {
      type: Array,
      default: () => []
    },

    // 显示已选数量
    showCheckedCount: {
      type: Boolean,
      default: false,
    },

    // 绑定的已选项数组
    multipleSelection: {
      type: Array,
      default: () => []
    },

    // 可见的字段表头 ['filed1', 'filed2', 'filed3']
    tableHeader: {
      type: Object,
      default: () => []
    },
    // 关闭自适应列宽 (用于解决列数小于3的表格在渲染时会出现数据抖动)
    closeAutoCloumnWidth: {
      type: Boolean,
      default: false
    },

    // 使用分页器
    showPagination: {
      type: Boolean,
      default: false
    },
    
    // 分页配置
    paginationConfig: {
      type: Object,
      default: () => {
        return {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes:[10, 30, 50, 100, 200, 500]
        }
      },
    },
  })

  const emit = defineEmits([
    "currentChange",
    "sizeChange",
  ]);
  

  interface IMyTableColumnProps {
    prop?: string
    label?: string
    fixed?: 'left' | 'right' | boolean
    visiable?: boolean
    index?: boolean
  }

  function isElTableColumn(vnode: VNode) {
    return (vnode.type as Component)?.name === 'ElTableColumn'
  }

  const table = ref()
  let tableHeader:any = {}
  let headerCount: number = 0
  
  const slotsOrigin = useSlots()
  const attrs:any = useAttrs()
  const slots = computed(() => {
    /* 对 slot 进行分类 */
    const main: VNode[] = [] // ElTableColumn 且存在 prop 属性
    const left: VNode[] = [] // ElTableColumn 不存在 prop 属性，但 fixed="left" 或者为 selection选框
    const other: VNode[] = [] // 其他

    // 权限控制的可见列字段
    let showKeys: string[] = [];
    
    // 方式一：只显示接口返回的字段判断 (设置了字段可见权限，接口不会返回该相关字段)
    if(props.data && props.data.length){
      let tableDataItem: any = props.data[0]
      showKeys = Object.keys(tableDataItem)
    }
    let isNullData = showKeys.length || props.tableHeader ? false : true; // 空数据时正常渲染表头

    // 方式二：用外部传来的表头字段
    console.log('外部props.tableHeader', props.tableHeader)
    if(props.tableHeader){
      tableHeader = JSON.parse(JSON.stringify(props.tableHeader));
    }

    if(JSON.stringify(tableHeader) !== '{}'){
      showKeys = Object.keys(tableHeader).map(v=>v.replace(/^./, (L) => L.toLowerCase())) // 首字母转小写
    }

    slotsOrigin.default?.()?.forEach((vnode, index) => {
      if(!vnode.props){
        vnode.props = {}
      }
      vnode.props.index = index; // 排序
      if (isElTableColumn(vnode)) {
        if(vnode.props && vnode.props.prop){
          if(!isNullData){
            vnode.props.visiable = showKeys.indexOf(vnode.props.prop) === -1 ? false : true;
          }
          
          // 构建可见列表头并缓存起来
          if(props.data && vnode.props.visiable){
            tableHeader[vnode.props.prop] = vnode.props.label
          }else{
            delete tableHeader[vnode.props.prop]
          }
        }
    
        const { prop, fixed, type } = vnode.props ?? {}
        if (prop !== undefined) return main.push(vnode)
        // if (type === 'selection' && vnode.props)  vnode.props.reserveSelection = true;
        if (fixed === 'left' || type === 'selection') return left.push(vnode)
      }
      other.push(vnode)
    })
    
    console.log('实际tableHeader',tableHeader)

    // 可见内容列少于3列则自适应宽度, 防止列数过少时撑不满table宽度出现断层
    let showMain = main.filter(v=>{return v.props && v.props.visiable !== false});
    if(!props.closeAutoCloumnWidth && showKeys.length && showMain.length < 3){
      main.forEach(vnode=>{
        if(vnode.props) vnode.props.width = ''
      })
      key.value++
    }
    if(!props.closeAutoCloumnWidth && !showMain.length && other.length && other[0].props){
      other[0].props.width = ''
      key.value++
    }

    return {
      main,
      left,
      other,
    }
  })

  /* 列的排序与部分属性 */
  const columns = reactive({

    // slot 中获取的
    slot: computed(() =>
      slots.value.main.map(({ props }) => ({
        prop: props!.prop,
        label: props!.label,
        fixed: props!.fixed,
        visiable: props!.visiable ?? true,
      }))
    ),

    // 渲染使用的
    render: computed(() => {
      const res: IMyTableColumnProps[] = []
      const slot = [...columns.slot]
      res.push(...slot)

      return res
    }),
  })

  /* 重构 slot.main */
  const refactorSlot = computed(() => {
    const { main } = slots.value

    /* 对 slot.main 进行改写 */
    const refactorySlot: VNode[] = []
    columns.render.forEach(({ prop, visiable, fixed }) => {
      if (!visiable) return

      const vnode = main.find((vnode) => prop === vnode.props?.prop)
      if (!vnode) return

      const cloned = cloneVNode(vnode, {
        fixed,
      })

      refactorySlot.push(cloned)
    })

    return refactorySlot
  })

  /* 强制更新 el-table-column */
  const key = ref(0)
  watch(refactorSlot, () => {
    if(Object.keys(tableHeader).length !== headerCount){
      // 初始表头已构建好则无需更新，否则数据刷新时会抖动闪烁
      headerCount = Object.keys(tableHeader).length;
      key.value += 1
      nextTick(()=>{
        table.value.doLayout()
      })
    }
  })

  /* 对外暴露的内容 */
  defineExpose({
    table, // el-table 实例的访问

    columns: computed(() => readonly(columns.render)),
    updateColumns(value: IMyTableColumnProps[]) {

    },
  })

  const children = () => [...slots.value.left, ...refactorSlot.value, ...slots.value.other].sort((a: any, b: any)=>a.props.index - b.props.index)
  console.log(children())

  // 合并分页配置
  const _paginationConfig = computed(() => {
    const config = {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      pageSizes: [10, 30, 50, 100, 200, 500],
      layout: "total, sizes, prev, pager, next, jumper",
    };
    return Object.assign(config, props.paginationConfig);
  });

  // 切换分页
  const currentPageChange = (pageIndex: number) => {
    emit("currentChange", pageIndex);
  }
  const pageSizeChange = (pageSize: number) => {
    emit("sizeChange", pageSize);
  }


  // 虚拟滚动
  // const { visibleData, initVirtualScroll, handleSelectionAll, addListeners, removeListeners, getRowKeys} = useVirtualScroll();
  // watch(()=>props.data, ()=>{
  //   initVirtualScroll(table, JSON.parse(JSON.stringify(props.data)))
  // })

  // onMounted(()=>{
  //   addListeners()
  // })
  
  // onBeforeUnmount(()=>{
  //   removeListeners()
  // })

</script>

<style lang="less" scoped>
  .operation-bar{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .left-operation{
      text-align: left;
      .checkedCount{
        // padding-left: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #606266;
        padding: 10px 0 10px 10px;
      }
    }
  }
</style>

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

pagination.vue

<template>
    <el-pagination v-bind="pageConfig"></el-pagination>
</template>
<script lang="ts" setup>
  import { defineProps } from "vue";
  defineProps({
      pageConfig: {
          type: Object,
          default: () => ({})
      }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12