vue+el-table 列表序号列分页后自动计算序号值

关注

原创最新推荐文章于 2026-10-13 10:37:42 发布 602 阅读 AI 写同款· GEO 优化 ›

Element UI el-table合计行深度定制：合并单元格与样式优化实战在Vue.js前端开发中，表格组件是数据展示与交互的核心。Element UI的el-table组件通过其强大的API和灵活的插槽机制，为开发者提供了高效构建数据表格的能力。其中，合计行功能是数据汇总与可视化的关键技术点，它允许开发者快速实现列数据的统计与展示。其核心原理在于利用`show-summary`属性和`summary-method`方法，在表格底部动态渲染汇总行。这项技术的价值在于提升数据表格的信息密度与可读性，广泛应用于后台管理系统、数据报表等需要展示统计信息的场景。在实际工程实践中，面对复杂阅读详情

<el-table
        v-loading="loading"
        :data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
        style="width: 100%"
      >
        <el-table-column label="序号" width="50" type="index" align="center">
          <template #default="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
        <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
        <el-table-column label="客户端" align="center" prop="clientKey" :show-overflow-tooltip="true" />
        <el-table-column label="设备类型" align="center">
          <template #default="scope">
            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
</el-table>

定义属性：
const queryParams = ref<OnlineQuery>({
  pageNum: 1,
  pageSize: 10,
});
表达式：
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}