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

【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 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

标签： ui vue.js javascript

本文转载自: https://blog.csdn.net/weixin_52938153/article/details/139124641
版权归原作者 一只小爪磕 所有，如有侵权，请联系我们删除。

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

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

Element入门系列导航

Table组件的基本使用

基本概念

基本使用

表格排序

表格筛选

表格合计行

Pagination分页组件

基本概念

基本使用

与 Table 结合使用

自定义分页布局

完整示例

结语

发表评论

“【Element入门】6、Element UI 数据展示组件详解”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航