Element Plus 是一套基于 Vue.js 的桌面端组件库，它提供了一系列的 UI 组件，满足了前端开发中常见的各种需求。其中的 el-table 是一个非常实用的表格组件，可以用于展示大量数据、进行排序、搜索、分页等数据操作。
在本篇博客中，我将为大家介绍 el-table 的使用方法，并结合具体的示例，详细说明该组件的各种功能和用法。
1. 安装 Element Plus
首先我们需要安装 Element Plus。通过 npm 安装，可以输入以下命令：
npm install element-plus --save然后在 main.js 中导入 Element Plus：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')2. 基本使用
el-table 的基本使用非常简单，只需要使用 <el-table> 标签来包裹表格内容即可。下面是一个简单的示例：
<template>
<div>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20,
gender: '男'
},
{
name: '李四',
age: 22,
gender: '女'
},
{
name: '王五',
age: 24,
gender: '男'
}
]
}
}
}
</script>在这个示例中，我们首先定义了一个名为 tableData 的数组，其中包含了三个对象，每个对象代表了一行数据。然后使用 <el-table> 标签来包裹表格内容，并使用 <el-table-column> 标签定义每一列的名称和对应的数据字段。
到目前为止，基本的表格已经呈现出来了。
3. 排序
el-table 提供了排序功能，可以对表格中的数据进行升序或降序排列。要使用排序功能，只需要在每一列中设置 sortable 属性即可。
<template>
<div>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name" sortable></el-table-column>
<el-table-column label="年龄" prop="age" sortable></el-table-column>
<el-table-column label="性别" prop="gender" sortable></el-table-column>
</el-table>
</div>
</template>默认情况下，第一次点击表头会按照升序排列，第二次点击会按照降序排列，第三次点击会取消排序。如果你想设置默认的排序方式，可以在表格组件中设置 default-sort 属性：
<el-table :data="tableData" :default-sort="{prop: 'age', order: 'descending'}">在这个示例中，我们设置了 age 列默认按照降序排列。
4. 搜索
el-table 还提供了搜索功能，可以让用户根据输入的关键字筛选表格中的数据。要使用搜索功能，需要先定义一个搜索框并绑定一个变量用于存储搜索关键字，然后在 el-table 组件中设置 filter-method 属性：
<template>
<div>
<el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
<el-table :data="tableData" :filter-method="filterTable">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 20,
gender: '男'
},
{
name: '李四',
age: 22,
gender: '女'
},
{
name: '王五',
age: 24,
gender: '男'
}
],
searchText: ''
}
},
methods: {
filterTable(value, row, column) {
const prop = column['property'];
return row[prop].toLowerCase().indexOf(value.toLowerCase()) !== -1;
}
}
}
</script>在这个示例中，我们添加了一个搜索框，并使用 v-model 绑定 searchText 变量，用于存储搜索关键字。然后在 el-table 中设置 filter-method 属性并定义一个名为 filterTable 的方法。该方法接受三个参数，分别是搜索框中的值、表格中的行数据以及当前操作的列。在方法中实现对表格数据的搜索操作，并返回符合条件的行数据。
5. 分页
el-table 还提供了分页功能，可以将大量数据分成多个页面展示。要使用分页功能，需要先设置每一页的显示条目数和总条目数，在 el-table 组件中设置 pagination 属性：
<template>
<div>
<el-table :data="tableData" :pagination="{pageSize: 2, total: 3}">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
</el-table>
</div>
</template>在这个示例中，我们设置每一页显示两条数据，共有三条数据，因此会自动生成两页。
6. 自定义列
除了默认的表格列之外，el-table 还支持自定义列。可以使用 <el-table-column> 标签来自定义列的内容，也可以使用 slot 来自定义表格列的各个部分。
下面是一个示例，展示了如何自定义表格列的一部分：
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="edit(scope.$index)">编辑</el-button>
<el-button type="danger" @click="remove(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>在这个示例中，我们自定义了一列操作，使用 <template> 标签和 slot-scope 属性来定义列的内容。在模板中可以使用 scope 变量来访问当前行的数据、索引或其他属性。
7. 总结
到目前为止，我们已经介绍了 el-table 的基本使用方法以及各种功能和用法。通过这些示例，相信你已经掌握了如何使用 el-table 来展示和操作表格数据。
总的来说，el-table 是一个非常实用的表格组件，可以很方便地处理数据展示和操作的各种需求。如果你在日常开发中需要处理表格数据，不妨尝试使用 Element Plus 中的 el-table 组件来简化你的开发工作。
