Element UI Table表格二次封装

450 阅读2分钟

Element UI Table表格二次封装

在Vue.js开发中,我们经常使用Element UI作为UI组件库。其中,Table表格是一个非常常用的组件。但是在实际开发中,我们往往需要对Table进行二次封装以满足特定的需求。下面介绍一种简单的Element UI Table表格二次封装方法。

需求

我们需要在Table表格中实现以下功能:

  1. 表格支持拖拽改变列宽
  2. 表格支持拖拽改变列顺序
  3. 表格支持列宽自适应

实现

首先,我们需要安装并引入xlsx库,以支持表格导出为Excel文件的功能。

然后,在使用Table组件时,我们可以在<el-table>标签内添加以下代码:

<el-table
  :data="tableData"
  :default-sort="{prop: 'date', order: 'descending'}"
  style="width: 100%"
  @sort-change="sortChange"
  ref="table"
>
  <el-table-column
    v-for="column in columns"
    :key="column.prop"
    :prop="column.prop"
    :label="column.label"
    :sortable="column.sortable"
    :resizable="column.resizable"
    :width="column.width"
    v-if="column.visible"
  >
    <template slot-scope="scope">{{ scope.row[column.prop] }}</template>
  </el-table-column>
</el-table>

其中,tableDatacolumns分别为表格数据和表格列的配置信息。我们可以在columns中设置每一列的属性,如sortable(是否支持排序)、resizable(是否支持拖拽改变列宽)等。同时,我们可以在``中监听sort-change事件,实现表格排序功能。

为了实现拖拽改变列宽和列顺序的功能,我们需要添加以下代码:

mounted() {
  let table = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
  let columns = this.columns;

  let startOffset = 0;
  let currentWidth = 0;
  let currentColumn = null;

  table.addEventListener('mousedown', function(event) {
    let target = event.target;

    if (target.className.includes('cell')) {
      let cell = target.closest('.cell');
      let column = columns.find(column => column.prop === cell.getAttribute('data-column'));

      if (column.resizable) {
        startOffset = event.pageX;
        currentColumn = column;
        currentWidth = cell.offsetWidth;
      }
    }
  });

  table.addEventListener('mousemove', function(event) {
    if (currentColumn) {
      let offset = event.pageX - startOffset;
      let newWidth = currentWidth + offset;
      currentColumn.width = newWidth + 'px';
    }
  });

  table.addEventListener('mouseup', function(event) {
    currentColumn = null;
  });

  let sortable = new Sortable(table.querySelector('thead tr'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    onEnd: function(event) {
      let fromIndex = event.oldIndex - 1;
      let toIndex = event.newIndex - 1;

      let fromColumn = columns[fromIndex];
      let toColumn = columns[toIndex];

      columns.splice(fromIndex, 1);
      columns.splice(toIndex, 0, fromColumn);
    }
  });
}

通过监听mousedownmousemovemouseup事件,我们可以实现拖拽改变列宽的功能。同时,我们引入Sortable库,实现拖拽改变列顺序的功能。

最后,我们可以在Table组件的<el-table>标签上添加fit属性,实现列宽自适应的功能:

<el-table
  :data="tableData"
  :default-sort="{prop: 'date', order: 'descending'}"
  style="width: 100%"
  @sort-change="sortChange"
  ref="table"
  fit
>
  <!-- ... -->
</el-table>

这样,我们就可以实现一个简单的Element UI Table表格二次封装,并满足以上需求。

总结

通过对Element UI Table表格的二次封装,我们可以更好地满足特定的需求。同时,我们也可以学习到如何使用一些常用的UI组件库和JavaScript库,如xlsxSortable。希望这篇文章对你有所帮助!