【Element入门】6、Element UI 数据展示组件详解

Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中

你猜-Zack

1946人浏览 · 2024-05-22 18:11:53

你猜-Zack · 2024-05-22 18:11:53 发布

【Element入门】Element UI 数据展示组件详解

Element入门系列导航

【Element入门】1、Element UI 介绍与安装
 【Element入门】2、Element UI 的基本使用
 【Element入门】3、Element UI 表单组件详解
 【Element入门】4、Element UI 布局组件详解
 【Element入门】5、Element UI 导航组件详解
【Element入门】6、Element UI 数据展示组件详解（本文）
【Element入门】7、Element UI 反馈组件详解
 【Element入门】8、Element UI 自定义主题

数据展示是 Web 应用中非常重要的部分，常用于显示和管理大量的数据。Element UI 提供了强大的数据展示组件，包括 Table 组件和 Pagination 组件，帮助开发者快速构建高效的数据展示界面。本篇文章将详细介绍这两类数据展示组件的使用方法。

Table组件的基本使用

基本概念

Table 组件用于展示结构化的数据表格，支持排序、筛选、分页等功能，适用于各种数据展示场景。

基本使用

以下是一个简单的 Table 组件示例：

<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  }
};
</script>

在这个示例中，我们使用 el-table 组件展示了一组简单的数据，并通过 el-table-column 组件定义了表格的列。

表格排序

可以通过设置 sortable 属性来使表格列支持排序：

<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" sortable></el-table-column>
      <el-table-column prop="name" label="Name" width="180" sortable></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  }
};
</script>

在这个示例中，date 和 name 列都被设置为可排序的。

表格筛选

可以通过设置 filters 属性和 filter-method 方法来使表格列支持筛选：

<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" sortable></el-table-column>
      <el-table-column prop="name" label="Name" width="180" :filters="[{ text: 'Tom', value: 'Tom' }, { text: 'Jerry', value: 'Jerry' }]" :filter-method="filterHandler" filter-placement="bottom-end"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05```vue
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  },
  methods: {
    filterHandler(value, row) {
      return row.name === value;
    }
  }
};
</script>

在这个示例中，我们为 name 列添加了筛选功能，用户可以通过筛选器选择 Tom 或 Jerry 进行筛选。

表格合计行

可以通过设置 show-summary 属性和 summary-method 方法来显示表格的合计行：

<template>
  <div id="app">
    <el-table :data="tableData" style="width: 100%" show-summary :summary-method="getSummaries">
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = 'Total';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' units';
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    }
  }
};
</script>

在这个示例中，我们通过 show-summary 属性显示合计行，并通过 summary-method 方法自定义合计逻辑。

Pagination分页组件

基本概念

Pagination 组件用于数据的分页展示，常与 Table 组件结合使用。它提供了丰富的分页功能和多种配置选项，帮助开发者快速实现分页效果。

基本使用

以下是一个简单的分页组件示例：

<template>
  <div id="app">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentPage: 1
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

在这个示例中，我们通过 el-pagination 组件展示了一个分页器，并绑定了分页大小和当前页码的改变事件。

与 Table 结合使用

以下是一个 Table 组件和 Pagination 组件结合使用的示例：

<template>
  <div id="app">
    <el-table :data="paginatedData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-08', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-09', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-10', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-11', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-12', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

在这个示例中，我们实现了以下功能：

分页数据计算：通过 computed 属性 paginatedData 计算当前页显示的数据。
分页大小改变：通过 handleSizeChange 方法处理每页显示条数的改变。
当前页改变：通过 handleCurrentChange 方法处理当前页码的改变。

自定义分页布局

Pagination 组件支持自定义布局，可以通过 layout 属性配置分页组件的布局：

<template>
  <div id="app">
    <el-table :data="paginatedData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, ->, total, sizes"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189,        Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-08', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-09', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-10', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-11', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-12', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

在这个示例中，我们通过 layout 属性自定义了分页组件的布局，使其显示顺序为 prev、pager、next、jumper、分隔符 ->、total 和 sizes。

完整示例

下面是一个包含更多功能的完整示例，包括排序、筛选、分页等功能：

<template>
  <div id="app">
    <el-table :data="paginatedData" style="width: 100%" @sort-change="handleSortChange">
      <el-table-column prop="date" label="Date" width="180" sortable></el-table-column>
      <el-table-column prop="name" label="Name" width="180" :filters="[{ text: 'Tom', value: 'Tom' }, { text: 'Jerry', value: 'Jerry' }]" :filter-method="filterHandler" filter-placement="bottom-end"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      sortProp: '',
      sortOrder: '',
      tableData: [
        { date: '2021-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-04', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-05', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-06', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-08', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-09', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-10', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-11', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2021-05-12', name: 'Jerry', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  },
  computed: {
    filteredData() {
      let data = this.tableData;

      // Filter logic
      if (this.filters.length > 0) {
        data = data.filter(row => {
          return this.filters.every(filter => {
            return filter.method(row[filter.prop], filter.value);
          });
        });
      }

      // Sort logic
      if (this.sortProp) {
        data = data.slice().sort((a, b) => {
          const propA = a[this.sortProp];
          const propB = b[this.sortProp];
          if (this.sortOrder === 'ascending') {
            return propA > propB ? 1 : (propA < propB ? -1 : 0);
          } else if (this.sortOrder === 'descending') {
            return propA < propB ? 1 : (propA > propB ? -1 : 0);
          }
          return 0;
        });
      }

      return data;
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredData.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    handleSortChange({ prop, order }) {
      this.sortProp = prop;
      this.sortOrder = order;
    },
    filterHandler(value, row) {
      return row.name === value;
    }
  }
};
</script>

在这个完整示例中，我们结合了排序、筛选和分页功能，具体实现如下：

数据过滤：在 filteredData 计算属性中，根据用户选择的筛选条件过滤数据。
数据排序：在 filteredData 计算属性中，根据用户选择的排序条件对数据进行排序。
分页数据计算：在 paginatedData 计算属性中，根据当前页码和每页显示条数计算当前页显示的数据。
分页大小改变：通过 handleSizeChange 方法处理每页显示条数的改变。
当前页改变：通过 handleCurrentChange 方法处理当前页码的改变。
排序改变：通过 handleSortChange 方法处理用户选择的排序条件。
筛选处理：通过 filterHandler 方法处理筛选逻辑。

结语

通过本章的学习，我们详细了解了 Element UI 提供的两种主要数据展示组件：Table 组件和 Pagination 组件。Table 组件适用于展示结构化的数据表格，支持排序、筛选、分页等功能；Pagination 组件适用于数据的分页展示，常与 Table 组件结合使用，帮助开发者快速实现分页效果。Element UI 提供的这些数据展示组件可以帮助我们快速构建高效的数据显示界面。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！