element-ui表格二次封装

在实际开发中，table作为我们经常使用的组件，便想着可以简便写法，本文旨对element-ui中的table二次封装，功能也包括分页。满足基本的sort排序，selection选择。

1. 封装表格

// common-table.vue组件
 <el-table
    class="common-table"
    v-bind="config"  // config放置table的配置信息，例如border:true
    :data="data"
    v-on="$listeners"
    row-key="id"
    header-row-class-name="common-table-header-row"
    @selection-change="$emit('selectChange', $event)" // 用户checkbox选中的时候的操作
    @sort-change="$emit('sortChange', $event)" // 用作排序功能-当排序发生变化的时候
>
    <slot name="prepend"></slot>  // 用作有type='selection'的时候
    <el-table-column
        v-for="(col, index) in columns"
        :key="col.key || index"
        :label="col.name"
        :sortable="col.sortable?col.sortable:false"  // 某些列需要排序功能：例如时间
        v-bind="col"
    >
        <template
            slot-scope="scope"
        >
          <template #header>
              <slot :name="`header${col.key || col.prop}`">								{{col.name}}
              </slot>
          </template>
            <slot
                v-if="$scopedSlots[`col-${col.key || col.prop}`]"
                v-bind="scope"
                :column="col"
                :text="getText(scope.row, col)"
                :name="`col-${col.key || col.prop}`"
            >
            </slot>
            <template
                v-else
            >
                {{ getText(scope.row, col) }}  // 此处可根据具体需求来显示
            </template>
        </template>
    </el-table-column>
    <template #empty>
        <slot name="empty"></slot>
    </template>
</el-table>
<el-pagination
    v-if="pager"
    :current-page="pager.pageNum"
    :page-size="pager.pageSize"
    :total="pager.total"
    :page-sizes="[10, 20, 30, 50]"
    @size-change="$emit('pager-size-change', $event)"
    @current-change="$emit('pager-current-change', $event)"
    layout="total, sizes, prev, pager, next, jumper"
    style="text-align: right;margin-top: 40px;"
>
</el-pagination>

2. 使用封装好的表格

 <common-table
    :data="data"  // table数据
    :columns="columns" // 列配置
    :config="tableConfig" // 表格配置
    :pager="pager" // 页码
    v-on="$listeners"
>
    <template #prepend>
        <el-table-column
            type="selection"
            width="36"
            reserve-selection
        >
        </el-table-column>
    </template>
    <template
        v-slot:col-id="{row}"
    >
        <span>{{row.name}}</span>
    </template>
</common-table>

const columns: Array<ColumnConfig> = [
    {
        name: '名称',
        prop: 'name',
    }, {
        name: '创建时间',
        prop: 'created',
        sortable: 'custom',
        format({ row }: {row: any}) {
            return dayjs(row.created).format('YYYY-MM-DD HH:mm:ss');
        },
    },
];

const tableConfig = {
    border: true,
};

3. 最外层组件的使用

<keys-table
    size="small"
    class="keys-table-content"
    :data="list" // 从后端返回的table数据
    :pager="pager"
    @pager-size-change="onPagerSizeChange" // 分页size发生变化时候的操作
    @pager-current-change="onPagerCurrentChange" // 当前页发生变化时候的操作
    @selectChange="selectChange" // selection选中时候的操作
    @sortChange="sortChange" // 排序发生变化时候的操作
>
</keys-table>
 pager = {
    total: 1,
    pageSize: 10,
    pageNum: 1,
};
onPagerSizeChange(size: integer) {
    this.pager.pageSize = size;
    this.query();
}
onPagerCurrentChange(num: integer) {
    this.pager.pageNum = num;
    this.query();
}
selectChange(val: any) {
    this.multipleTable = val;
}
sortChange(column: any) {
    if (column.order === 'ascending') {
        this.params.order = column.prop;
    } else {
        this.params.order = '-' + column.prop;
    }
}