“ 知行合一 ” —— 王阳明
在开发项目中,我们时常会用到表格,许多需求可能会要求自定义特定的行或列。
接下来,我们将探讨在实际开发中如何应对这一挑战。
本文案例采用的技术:
名称 | 版本 |
---|---|
Vue3 | ^3.5.12 |
element-plus | ^2.8.8 |
知识点
我们先来复习下2个知识点,来自element-plus文档 table:
1、自定义表头
通过设置 slot 来自定义表头。(只贴出重点代码)
<el-table :data="filterTableData" style="width: 100%">
<el-table-column label="Date" prop="date" />
<el-table-column label="Name" prop="name" />
<el-table-column align="right">
<template #header>
<el-input v-model="search" size="small" placeholder="Type to search" />
</template>
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type