从零开始Vue3+Element Plus后台管理系统(29)——2 个属性实现el-table 表格跨页选择

抹茶san
2,244 阅读3分钟

2.gif

使用 el-table 的 selection 选择数据操作，翻页后之前的选中状态就会消失。但是产品需要我们可以选择不同页面的多条数据，然后一起进行批量操作。

基础的跨页选择

认真阅读 el-table 的文档，发现 Element Plus 再一次贴心的替我们考虑了这种场景， 通过下面 2 个属性，就可以实现跨页选择。

属性名说明类型Default
reserve-selection数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。booleanfalse
row-key行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。function** / string-

就这么方便

    <el-table
        :data="tableData"
        ref="multipleTable"
        v-loading="loading"
        :row-key="(row) => row.id"  // 第一步
        @selection-change="handleSelectionChange"
      >
        <el-table-column 
            type="selection" 
            :reserve-selection="true" // 第二步
            align="center" fixed 
        />

但是，假设用户选择了几十几百条数据后，想取消其中某几条数据，怎么办？他有可能会刷新页面，然后重新选，也有可能一页页的去查找，总之想想就头大。

作为用户体验优先的前端开发，还要继续完善跨页选择的整个交互流程，而不能止步于选了就行。

查看已选数据的界面

增加一个弹窗，在此展示所有已选的数据，可以删除不需要的数据，确认完成后，继续批量操作（导出、删除...)

image.png

我们直接操作multipleSelection，弹窗中的删除，会同步更新表格中数据的选中状态。

 <el-dialog width="1000px" v-model="visible">
      <template #header>
        <div class="flex">
          <span class="text-lg">已选数据 ({{ multipleSelection.length }})</span>
          <div class="ml-auto">
            <el-button type="primary">导出</el-button><el-button type="danger">删除</el-button>
          </div>
        </div>
      </template>
      <el-scrollbar style="height: 60vh">
        <ul>
          <li v-for="item in multipleSelection" :key="item.id">
            {{ item.id }} {{ item.name }}
            <el-button type="danger" :icon="Close" @click="handleDeleteItem(item)" text></el-button>
          </li>
        </ul>
      </el-scrollbar>
    </el-dialog>

取消数据选中toggleRowSelection

const handleDeleteItem = (item) => {
  multipleTable.value.toggleRowSelection(item, false)
}

如果没有查看 el-table 的文档，我可能会写出比现在多得多的代码来实现表格跨页选择功能，Element 确实帮我们解决了很多问题，但是有空了也别忘了去阅读一下源码，了解它是如何实现的。

附记： 修改 Mock 数据

如果不用 mock 数据，可以忽略此内容

之前 Mock 的列表数据，id 用的@guid，每次请求返回的 id 都会不同，无法模拟跨页选择的效果。 为此，专门修改了 mock 脚本，根据页码返回了统一连贯的 id，不过列表的其他内容还是随机的。

很少用 Mock 脚本，所以又花了一点时间去学习，还是用 Javascript 来写脚本，所以对于前端同学没啥难度。

var MockJs = require('mockjs');
// 获取自动 Mock 出来的数据
var responseJson = fox.mockResponse.json();

var pageSize = fox.mockRequest.getParam('pageSize')
var page = fox.mockRequest.getParam('page')

// 修改 responseJson 里的分页数据
// 将 page 设置为请求参数的 page
responseJson.result.page = page;

console.log('脚本', responseJson.result.page)

// 将 total 设置 120
responseJson.result.total = responseJson.result.pages * pageSize;

const arr = []
for (var i = 0; i < parseInt(pageSize); i++) {
    arr.push({
        id: pageSize * (page - 1) + i,
        name: MockJs.mock('@csentence(10,40)'),
        mail: MockJs.mock('@email'),
        city: MockJs.mock('@city'),
        "source": MockJs.mock('@string( pool, 1, 10 )'),
        "mobile": MockJs.mock('@integer(11)'),
        "mail": MockJs.mock('@email()'),
        "url": MockJs.mock("@url('http')"),
        "memo": MockJs.mock("@paragraph()"),
        "province": MockJs.mock("@province()"),
        "city": MockJs.mock("@city()"),
        "updated": MockJs.mock("@datetime('yyyy-MM-dd HH:mm:ss')"),
        "created": MockJs.mock("@datetime('yyyy-MM-dd HH:mm:ss')"),
        "createdBy": MockJs.mock("@name()"),
        "status": MockJs.mock("@pick('0','1')"),
        "type": MockJs.mock("@pick(highschool,overseas,company,other)")
    })
}

fox.mockResponse.setBody({
    code: 200,
    message: 'success',
    result: {
        total: responseJson.result.pages * pageSize,
        page: page,
        pageSize: pageSize,
        list: arr
    }
});

项目地址

本项目GIT地址：github.com/lucidity99/…

有任何问题或者兴趣也可以在公众号：自由前端之路 找到我。

avatar
文章
阅读
粉丝