艾聊技术——实用而又优雅的element-ui table二次封装，一次搞定拖拽、调整、保存、控制列！

前端

2024-01-25 20:33:34

你是否还在为Element-UI table的单调乏味而烦恼？还在为实现拖拽、调整列宽、本地保存、控制动态列项等功能而苦苦挣扎？别担心，这篇技术博客将带你领略Element-UI table二次封装的奥妙，助你轻松打造高效优雅的表格组件。

一、背景介绍

Element-UI table作为一款备受欢迎的表格组件，以其简洁美观、功能强大的特点赢得了众多开发者的青睐。然而，在实际应用中，我们常常会遇到一些个性化需求，需要对table进行二次封装，以满足更加复杂的业务场景。

二、二次封装方案

Element-UI table二次封装的方案有很多，这里我们介绍一种既实用又优雅的方案，它可以满足我们拖拽、调整列宽、本地保存、控制动态列项等所有需求。

三、核心组件

二次封装的核心组件是ColumnsDrawer组件，这是一个抽屉组件，用于展示所有可用的列项，并允许用户进行拖拽、调整列宽、本地保存等操作。

四、实现步骤

导入必要依赖

import {Drawer, Table, TableColumn, Button} from 'element-ui';

定义ColumnsDrawer组件

const ColumnsDrawer = {
  data() {
    return {
      visible: false,
      columns: [],
      defaultColumns: [],
      selectedColumns: [],
    };
  },
  methods: {
    // 打开抽屉
    open() {
      this.visible = true;
    },
    // 关闭抽屉
    close() {
      this.visible = false;
    },
    // 拖拽列项
    onDrag(params) {
      const {oldIndex, newIndex} = params;
      this.columns.splice(oldIndex, 1);
      this.columns.splice(newIndex, 0, params.item);
    },
    // 调整列宽
    onResize(params) {
      const {column, width} = params;
      column.width = width;
    },
    // 本地保存
    onSave() {
      // 将当前选择的列项保存到本地存储
      localStorage.setItem('columns', JSON.stringify(this.selectedColumns));
    },
    // 控制动态列项显示
    onToggleColumn(column) {
      // 根据column的显示状态，将其添加到或从selectedColumns中删除
      if (column.visible) {
        this.selectedColumns.push(column);
      } else {
        const index = this.selectedColumns.indexOf(column);
        this.selectedColumns.splice(index, 1);
      }
    },
  },
  render(h) {
    return (
      <Drawer
        title="列设置"
        visible={this.visible}
        width="400px"
        onClose={this.close}>
        <div class="drawer-content">
          <Table
            style="width: 100%"
            border
            :columns="this.columns"
            :data={this.defaultColumns}
            on-drag-end={this.onDrag}
            on-cell-resize={this.onResize}>
            <TableColumn type="selection" width="50" align="center"></TableColumn>
            <TableColumn prop="label" label="列名" width="150"></TableColumn>
            <TableColumn prop="width" label="宽度" width="100"></TableColumn>
            <TableColumn prop="visible" label="显示" width="100" align="center">
              <template slot-scope="scope">
                <Checkbox v-model="scope.row.visible" @change="onToggleColumn(scope.row)"></Checkbox>
              </template>
            </TableColumn>
          </Table>
          <div class="drawer-footer">
            <Button type="primary" size="small" @click="onSave">保存</Button>
            <Button size="small" @click="close">取消</Button>
          </div>
        </div>
      </Drawer>
    );
  },
};

使用二次封装组件

在table组件中，使用ColumnsDrawer组件来控制列项的拖拽、调整列宽、本地保存等操作。

<el-table
  :columns="columns"
  :data="data">
  <template slot="default" slot-scope="scope">
    <ColumnsDrawer
      :columns="columns"
      :default-columns="defaultColumns"
      :selected-columns="selectedColumns"
      @save="onSave"></ColumnsDrawer>
  </template>
</el-table>