首先看一下业务需求
需要实现跨页多选，双击行的时候弹出编辑对话框，对每行可以进行编辑和删除，实现分页器。
如果还没在项目中配置element-plus的可以参考文章 从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts，也可以参考element-plus官方文档 element-plus
搭建基本的el-table结构
我将一一解释代码，大家后续可以对照代码和文章进行理解观看
<el-table:data="dataList"style="width: 100%"borderrow-key="id"@selection-change="handleSelectionChange"v-loading="loading"@row-dblclick="onClickEditUser"><el-table-column type="selection" width="55" reserve-selection /><el-table-columntype="index":index="indexMethod"label="序号"width="100"/><el-table-column prop="userIdNumber" label="身份证号" /><el-table-column prop="userName" label="姓名" /><el-table-column prop="userBirthday" label="生日" /><el-table-column label="操作" min-width="90"><template #default="{ row }"><el-button @click="onClickEditUser(row)"> 编辑 </el-button><el-button type="danger" @click="onCLickDeleteUser(row)">删除</el-button></template></el-table-column><template #empty><el-empty description="暂无数据"></el-empty></template></el-table>
el-table
- el-table 使用 :
data="dataList"绑定数据列表，这个数据就是自己定义的了 border就在表格内添加边框，更加美观row-key="id"如果要实现跨页多选，这个非常重要，具体的作用是因为后续要给选择框的列添加reserve-selection属性，设置该属性的前提就是el-table设置row-key
@selection-change="handleSelectionChange"这个的作用是因为实现了跨页多选，当选择的行发生变化时，就会自动触发这个函数
···js
//多选用户时，存储当前选择的用户
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
···v-loading="loading"这个就是当loading为true时，表格中有转圈圈的提示，让交互更加友好，具体为可以设置请求数据时设置loading。
//获取数据
const getUserList = async function () {loading.value = true//接口根据自己实际的写await ...loading.value = false
}@row-dblclick="onClickEditUser"就是实现双击行时触发响应自定义函数
//编辑用户信息
const onClickEditUser = function (row) {//自定义执行逻辑，row就是当前行的数据userFormDialogRef.value.onClickOpenEditDialog(row)
}
el-table-column
el-table-column就是el-table中每列的数据
<el-table-column type="selection" width="55" reserve-selection />
这个就是第一列的选择框的列，设置type为selection，要实现跨页多选，就一定设置reserve-selection
<el-table-column type="index" :index="indexMethod" label="序号" width="100"/>
这个就是第二列的序号，设置type为index即可，但是如果仅仅这样设置有个问题，那就是当页面改变时，index仅为当前页的序号。
举例：当前第一页，index为1-10，切换页面至第二页时，期望Index为11-20，但是此时会还是1-10
因此需要下述的函数来进行额外处理
//更改序号
//pageNum和pageSize都是自定义的，后面分页器会讲到
const indexMethod = function (index) {return (pageNum.value - 1) * pageSize.value + index + 1
}
- 数据列
<el-table-column prop="userIdNumber" label="身份证号" />
<el-table-column prop="userName" label="姓名" />
<el-table-column prop="userBirthday" label="生日" />
这几个就都一样的，label为当前行的名字，prop为绑定的数据，比如姓名绑定的是userName，那么el-table 绑定的dataList的基本结构就是
const dataList = ref([{userIdNumber:'123',userName:'jack',userBirthdat:'2021-01-01'
},{userIdNumber:'123',userName:'jack',userBirthdat:'2021-01-01'
}])
- 操作列
<el-table-column label="操作" min-width="90"><template #default="{ row }"><el-button @click="onClickEditUser(row)"> 编辑 </el-button><el-button type="danger" @click="onCLickDeleteUser(row)">删除</el-button></template></el-table-column>
这里使用了template具名插槽，记住一定要设置#default="{row}"，这样后续点击编辑删除的时候，才可以传递本行的数据给对应的处理函数
两个el-button分别绑定处理函数，较为简单
使用el-pagination分页器
官方文档
-
:background="true"这个就是设置分页器的背景，更加美观 -
layout="jumper,total, prev, pager, next"这个就是设置分页器有哪些元素，分别是页面跳转、总数据数、向前翻页、显示页数、向后翻页，layout中写的数据就是实际显示的数据。实际上还有个size，可以设置每页的数据条数
-
@current-change="onCurrentChange"监听页面变化，触发对应自定义函数
//页数变化时
const onCurrentChange = function (page) {pageNum.value = pagegetUserList()
}
- 数据绑定
:total="total"
:page-size="pageSize"
:current-page="pageNum"
这三个分别绑定数据总数，每页数据数目、当前页数
//分页器相关
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
一般来讲，total是请求数据时，后端一起发送的，pageSize可以固定写死，也可以通过刚才提到的layout的size属性进行动态设置
