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部分案例：
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-column
property="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 中，也就是嵌套，你可以实现组头。
例如：
<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-column
prop="tag"
label="Tag"
width="100"
:filters="[
{ text: 'Home', value: 'Home' },
{ text: 'Office', value: 'Office' },
]"
:filter-method="filterTag"
filter-placement="bottom-end"
>他的filter-method函数代码为：
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函数：
const indexMethod = (index: number) => {
return index * 2
}自动传入了当前行数，然后返回了当前行数*2作为下一行索引值
页面效果：
原文地址：https://blog.csdn.net/Wgq0731/article/details/142303533
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！