elementUI el-table二次封装的方法是什么

发布时间：2023-03-31 11:27:27 作者：iii
来源：亿速云阅读：138

ElementUI el-table 二次封装的方法是什么

引言

在现代前端开发中，表格是展示数据的重要组件之一。ElementUI 作为一款流行的 Vue.js UI 组件库，提供了强大的 el-table 组件来满足各种表格需求。然而，在实际项目中，我们往往需要对 el-table 进行二次封装，以适应特定的业务需求。本文将详细介绍如何对 el-table 进行二次封装，并提供一些进阶技巧和常见问题的解决方案。

ElementUI 简介

ElementUI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它提供了丰富的组件，如按钮、表单、表格、对话框等，帮助开发者快速构建高质量的 Web 应用。

el-table 组件概述

el-table 是 ElementUI 中的一个表格组件，支持多种功能，如分页、排序、筛选、自定义列等。它通过简单的配置即可实现复杂的表格功能，是 ElementUI 中最常用的组件之一。

为什么需要二次封装 el-table

尽管 el-table 功能强大，但在实际项目中，我们往往需要根据业务需求对其进行定制。例如，我们可能需要统一表格的样式、添加分页功能、实现搜索功能等。通过二次封装 el-table，我们可以将这些功能抽象出来，减少重复代码，提高开发效率。

二次封装 el-table 的基本思路

二次封装 el-table 的基本思路是将常用的功能抽象成一个新的组件，并在新组件中通过 props 和 slots 来传递配置和内容。这样，我们可以在不同的页面中复用这个组件，而不需要重复编写相同的代码。

二次封装 el-table 的具体实现

6.1 封装基础表格组件

首先，我们可以封装一个基础的表格组件，包含基本的表格功能，如列定义、数据绑定等。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
};
</script>

6.2 封装带分页的表格组件

接下来，我们可以封装一个带分页功能的表格组件。

<template>
  <div>
    <el-table :data="pagedData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      />
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    />
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: {
    pagedData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
  },
};
</script>

6.3 封装带搜索功能的表格组件

我们可以进一步封装一个带搜索功能的表格组件。

<template>
  <div>
    <el-input v-model="searchQuery" placeholder="Search..." />
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      searchQuery: "",
    };
  },
  computed: {
    filteredData() {
      return this.tableData.filter((item) =>
        Object.values(item).some((value) =>
          String(value).toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      );
    },
  },
};
</script>

6.4 封装带排序功能的表格组件

我们可以封装一个带排序功能的表格组件。

<template>
  <el-table :data="sortedData" style="width: 100%" @sort-change="handleSortChange">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      sortable
    />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      sortProp: "",
      sortOrder: "",
    };
  },
  computed: {
    sortedData() {
      if (!this.sortProp) return this.tableData;
      return this.tableData.slice().sort((a, b) => {
        if (this.sortOrder === "ascending") {
          return a[this.sortProp] > b[this.sortProp] ? 1 : -1;
        } else {
          return a[this.sortProp] < b[this.sortProp] ? 1 : -1;
        }
      });
    },
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.sortProp = prop;
      this.sortOrder = order;
    },
  },
};
</script>

6.5 封装带筛选功能的表格组件

我们可以封装一个带筛选功能的表格组件。

<template>
  <div>
    <el-select v-model="filterValue" placeholder="Select filter">
      <el-option
        v-for="option in filterOptions"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    filterOptions: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      filterValue: "",
    };
  },
  computed: {
    filteredData() {
      if (!this.filterValue) return this.tableData;
      return this.tableData.filter((item) =>
        item[this.filterOptions[0].value].includes(this.filterValue)
      );
    },
  },
};
</script>

6.6 封装带自定义列的表格组件

我们可以封装一个带自定义列的表格组件。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    >
      <template slot-scope="scope">
        <slot :name="column.prop" :row="scope.row" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
};
</script>

6.7 封装带操作列的表格组件

我们可以封装一个带操作列的表格组件。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
    <el-table-column label="Operations">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)">Edit</el-button>
        <el-button @click="handleDelete(scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleEdit(row) {
      this.$emit("edit", row);
    },
    handleDelete(row) {
      this.$emit("delete", row);
    },
  },
};
</script>

二次封装 el-table 的进阶技巧

7.1 动态列渲染

在某些情况下，我们需要根据数据动态渲染表格列。可以通过 v-for 指令和 slot 来实现。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in dynamicColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    dynamicColumns: {
      type: Array,
      required: true,
    },
  },
};
</script>

7.2 动态数据加载

对于大数据量的表格，我们可以通过动态加载数据来提高性能。

<template>
  <el-table :data="tableData" style="width: 100%" @scroll="handleScroll">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        this.$emit("load-more");
      }
    },
  },
};
</script>

7.3 表格性能优化

对于大数据量的表格，我们可以通过虚拟滚动来提高性能。

<template>
  <el-table :data="tableData" style="width: 100%" height="500">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
};
</script>

7.4 表格样式定制

我们可以通过 scoped 样式或全局样式来定制表格的外观。

<template>
  <el-table :data="tableData" style="width: 100%" class="custom-table">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped>
.custom-table {
  background-color: #f5f5f5;
}
</style>

二次封装 el-table 的常见问题与解决方案

表格数据更新不及时：确保 tableData 是响应式的，或者使用 this.$set 来更新数据。
表格列宽度不一致：可以通过 width 属性来设置列宽，或者使用 flex 布局。
表格性能问题：对于大数据量的表格，可以使用虚拟滚动或分页加载来提高性能。

总结

通过对 el-table 的二次封装，我们可以将常用的功能抽象出来，减少重复代码，提高开发效率。本文介绍了如何封装基础表格组件、带分页的表格组件、带搜索功能的表格组件等，并提供了一些进阶技巧和常见问题的解决方案。希望这些内容能帮助你在实际项目中更好地使用 el-table。