Element-plus table 二次封装

前言

Element 已经提供简洁、样式优雅、易用的table组件，可快速上手。项目中可通过、标签及其属性快速生成一个个性化的独立table，项目中有较多标格展示的情况下，会出现一些问题：
1、每个页面都有一整套风格相似的table标签
2、对同类型数据做处理时，每个页面都需要引入公用的处理函数
3、例如align这种属性有默认值（左对齐），如果UI需要居中或居右，需要对每个标签中的align属性设置。

针对上面的问题，尝试将el-table二次封装成全局公共组件

需要保证：
1、组件输入、输出数据格式清晰
2、可复用，贴合绝大部分应用场景
3、可扩展，1）可根据Element官方升级做对应调整 2）可添加对数据的处理能力

创建table/index.vue，并注册为全局组件

table/index.vue

main.ts

import Table from '@/components/table/index.vue'

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.component('Table', Table)

app.mount('#app')

页面中引用

上面Table组件中，展示了table的基础结构，引用时会展示固定的列表，需要对Table进行改造

1. 接收不同的数据源tableData

2. tableData只是全量源数据，我们需要一个可以描述el-table-column的集合，描述展示列的顺序、名称、字段、列宽等。

• 例如下面的格式

[
    // 根据el-table提供的列属性进行扩展
    {
      prop: 'name', // 列数据参数
      label: '姓名', // 列名称
      width: 180, // 列宽度，空或不填写表示自适应
    },
]

• 使用tableColumn接收该数据，并通过v-for渲染

• 列表中数据往往需要一些格式处理后再展示，我们通过改造el-table-column，提供一些方案
  1）单纯对字段数据进行处理

对应fomart格式

  [
    {
      prop: 'name', // 列数据参数
      label: '姓名', // 列名称
      width: '', // 列宽度，空或不填写表示自适应
      format: {
        type: 'time｜dictionaries', // 数据处理类型
        rules: [{ label: '', value: '' }], // 定义数据字典
        ...
      }
    },
  ]

2）展示数据需要根据多个字段计算，提供filter函数

filte格式

[
   {
      filter: (row) => {
        let nickName = row.nickName ? `(曾用名:${row.nickName})`  : ''
        return row.name + nickName
      }
    },
]

3）单元格数据可点击

event格式

// tableColumn
 [
    {
      event: (row) => { fn(row) }, // 事件,数据可点击;fn为触发的函数;row是当前列
    },
  ]

function fn(row) {
}

4）较复杂情况，如同时需要特定样式、触发事件
4-1）具名作用域插槽

父组件