element-ui表格操作大全

一、基础表格展示

数据绑定：

在el-table元素中注入data对象数组，在el-table-column（列）中使用prop属性来对应对象中的键名，使用label属性定义列名

元素案例内容：

<el-table border :data="userList"><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="Name" prop="name"></el-table-column><el-table-column label="AGE" prop="age"></el-table-column></el-table>

那么上述代码就实现了绑定userList的数组对象，一共有三列，第一列列名为ID，绑定的数组对象key值为id，以此类推。

对应数据script部分案例：

javascript">import {ref} from 'vue'
const userList=ref([{id:'1',name:'tom',age:'20'},{id:'2',name:'张三',age:'20'},{id:'3',name:'李四',age:'20'},{id:'4',name:'李四',age:'20'}])

二、表格样式

边框：border、斑马纹：stripe、行高亮：row-class-name

要设置什么样式就在el-table表格标签中填入什么属性即可

例如，要添加斑马纹样式：

<el-table stripe>

三、显示溢出工具提示的表格

当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。为 true 时多余的内容会在 hover 时以 tooltip 的形式暂时显示出来。

案例代码：

<template>
<el-table :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" />
<el-table-column label="Date" width="120"><template #default="scope">{{ scope.row.date }}</template></el-table-column><el-table-column property="name" label="Name" width="120" /><el-table-columnproperty="address"label="use show-overflow-tooltip"width="240"show-overflow-tooltip/><el-table-column property="address" label="address" />
</el-table>
</template>
<script setup>
const tableData: User[] = [{date: '2016-05-04',name: 'Aleyna Kutzner',address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',}]
</script>

上述代码将 地址列进行溢出处理

页面样式：

当悬停于地址列内容时将显示：

四、固定表头和列

1、固定表头（纵向内容过多时）：

只要在 el-table 元素中定义了 height 属性，大小根据需求来，即可实现固定表头的表格，而不需要额外的代码。

2、固定列（横向内容过多时）：

固定列需要使用 fixed 属性，它接受 Boolean 值。如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。

五、流体高度

当数据量动态变化时，又想展示固定高度。可以为 Table 设置一个最大高度。

通过设置 max-height 属性为 el-table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条

例如：

 <el-table :data="tableData" style="width: 100%" max-height="250">

六、多级表头

只需要将el-table-column 放置于el-table-column 中，也就是嵌套，你可以实现组头。

例如：

javascript"><template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="150" /><el-table-column label="Delivery Info"><el-table-column prop="name" label="Name" width="120" /><el-table-column label="Address Info"><el-table-column prop="state" label="State" width="120" /><el-table-column prop="city" label="City" width="120" /><el-table-column prop="address" label="Address" /><el-table-column prop="zip" label="Zip" width="120" /></el-table-column></el-table-column></el-table>
</template>
<script setup>
const tableData = [{date: '2016-05-03',name: 'Tom',state: 'California',city: 'Los Angeles',address: 'No. 189, Grove St, Los Angeles',zip: 'CA 90036',},]
</script>

上述代码中的 Delivery Info列包含了Name列和Address Info列，而Address Info又包含了state,city,address,zip列。实现了组头

页面效果：

七、排序和筛选

1、排序

在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。

案例代码：

<el-table:data="tableData":default-sort="{ prop: 'date', order: 'descending' }"style="width: 100%"><el-table-column prop="date" label="Date" sortable width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" :formatter="formatter" /></el-table>

上述代码在table中设置了default-sort属性，值内有两个键值对，一个是prop表示将date列设置为默认排序列，order代表排序方式，升序或降序，案例中是降序，升序为：ascending。在date列属性也设置了sortable表示以这个列为基准排序

2、筛选

在列中设置 filters 和 filter-method 属性即可开启该列的筛选， filters 是一个数组，也就是筛选的数据，filter-method 是一个方法，它用于决定某些数据是否显示。

例如有个表格的其中一列这样设置：

<el-table-columnprop="tag"label="Tag"width="100":filters="[{ text: 'Home', value: 'Home' },{ text: 'Office', value: 'Office' },]":filter-method="filterTag"filter-placement="bottom-end">

他的filter-method函数代码为：

javascript">const filterTag = (value: string, row: User) => {return row.tag === value
}

意义为当前行的value如果等于被选中的value就会返回true，那么该行就会被显示

八、展开行和合计行（当行内容过多并且不想显示横向滚动条时）

1、展开行

设置 type="expand" 和 slot 可以开启展开行功能

例如：

 <el-table-column type="expand"><template #default="props"><div m="4"><p m="t-0 b-2">State: {{ props.row.state }}</p><p m="t-0 b-2">City: {{ props.row.city }}</p><p m="t-0 b-2">Address: {{ props.row.address }}</p><p m="t-0 b-2">Zip: {{ props.row.zip }}</p><h3>Family</h3><el-table :data="props.row.family" :border="childBorder"><el-table-column label="Name" prop="name" /><el-table-column label="State" prop="state" /><el-table-column label="City" prop="city" /><el-table-column label="Address" prop="address" /><el-table-column label="Zip" prop="zip" /></el-table></div></template></el-table-column>

页面效果：

展开第一行：

2、合计行

将 show-summary 设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作

例如：

<el-table :data="tableData" border show-summary style="width: 100%"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /><el-table-column prop="amount1" sortable label="Amount 1" /><el-table-column prop="amount2" sortable label="Amount 2" /><el-table-column prop="amount3" sortable label="Amount 3" /></el-table>

页面效果：

九、自定义索引

通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

例如：

 <el-table :data="tableData" style="width: 100%"><el-table-column type="index" :index="indexMethod" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>

上述代码将第一列作为索引列，并且传入了一个indexMethod函数：

javascript">const indexMethod = (index: number) => {return index * 2
}

自动传入了当前行数，然后返回了当前行数*2作为下一行索引值

页面效果：