使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号

首先看一下业务需求

需要实现跨页多选，双击行的时候弹出编辑对话框，对每行可以进行编辑和删除，实现分页器。
如果还没在项目中配置element-plus的可以参考文章 从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts，也可以参考element-plus官方文档 element-plus

搭建基本的el-table结构

我将一一解释代码，大家后续可以对照代码和文章进行理解观看

<el-table
        :data="dataList"
        style="width: 100%"
        border
        row-key="id"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        @row-dblclick="onClickEditUser"
      >
        <el-table-column type="selection" width="55" reserve-selection />
        <el-table-column
          type="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

1. el-table 使用 :data="dataList" 绑定数据列表，这个数据就是自己定义的了
2. border就在表格内添加边框，更加美观
3. row-key="id"如果要实现跨页多选，这个非常重要，具体的作用是因为后续要给选择框的列添加reserve-selection属性，设置该属性的前提就是el-table设置row-key
   
4. @selection-change="handleSelectionChange"这个的作用是因为实现了跨页多选，当选择的行发生变化时，就会自动触发这个函数
   ···js
   //多选用户时，存储当前选择的用户
   const multipleSelection = ref([])
   const handleSelectionChange = (val) => {
   multipleSelection.value = val
   }
   ···
5. v-loading="loading"这个就是当loading为true时，表格中有转圈圈的提示，让交互更加友好，具体为可以设置请求数据时设置loading。

//获取数据
const getUserList = async function () {
  loading.value = true
  //接口根据自己实际的写
  await ...
  loading.value = false
}

6. @row-dblclick="onClickEditUser"就是实现双击行时触发响应自定义函数

//编辑用户信息
const onClickEditUser = function (row) {
	//自定义执行逻辑，row就是当前行的数据
  userFormDialogRef.value.onClickOpenEditDialog(row)
}

el-table-column

el-table-column就是el-table中每列的数据

1. <el-table-column type="selection" width="55" reserve-selection />
   这个就是第一列的选择框的列，设置type为selection，要实现跨页多选，就一定设置reserve-selection
   
2. <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
}

3. 数据列

<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'
}])

4. 操作列

<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分页器

官方文档

1. :background="true"这个就是设置分页器的背景，更加美观

2. layout="jumper,total, prev, pager, next"这个就是设置分页器有哪些元素，分别是页面跳转、总数据数、向前翻页、显示页数、向后翻页，layout中写的数据就是实际显示的数据。实际上还有个size，可以设置每页的数据条数
   

3. @current-change="onCurrentChange"监听页面变化，触发对应自定义函数

//页数变化时
const onCurrentChange = function (page) {
  pageNum.value = page
  getUserList()
}

4. 数据绑定

:total="total"
:page-size="pageSize"
:current-page="pageNum"

这三个分别绑定数据总数，每页数据数目、当前页数

//分页器相关
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)

一般来讲，total是请求数据时，后端一起发送的，pageSize可以固定写死，也可以通过刚才提到的layout的size属性进行动态设置