ant-design-vue表格组件添加索引列

原创已于 2022-12-21 17:57:49 修改 · 3.8k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

winnerFly

关注

标签

#vue.js #javascript #前端

分类前端开发

于 2022-12-21 17:56:07 首次发布

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在使用Ant-Design-Vue的表格组件中，不依赖官方提供的customRender或bodyCell插槽，成功为第一列添加索引。首先尝试了customRender未果，继而通过bodyCell插槽实现，并展示了代码和解决过程。

使用表格组件为第一列添加索引

在使用 ant-design-vue Table 组件的时候，设置第一列为索引列不像其他组件库有很方便的属性，ant-design-vue 并没有提供相关属性，需要通过自定义列的方式来实现。

第一种（没有实现）

根据 ant-design-vue 的文档，表格组件 columns 对象上有一个 customRender 参数：
在这里插入图片描述
它是一个函数，接收三个参数，分别是当前行的值，当前行数据，行索引
相关代码

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => index
  }
]

效果如图
在这里插入图片描述

发现并没有实现，又去网上查找问题，有一个解决方案：
相关代码

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => `${index + 1}`
  }
]

在模板运算符书写 js 变量 index + 1，效果如图：
在这里插入图片描述也没有实现,然后我打印这个 index

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => {
      console.log('index:' + index)
    }
  }
]

打印结果：
在这里插入图片描述
undefined！
第一种方法没有实现

第二种

不再使用 customRender 参数，而是通过 bodyCell 参数：
在这里插入图片描述
它是一个插槽，有三个参数分别是当前行的值，当前行数据，行索引
相关代码

<a-table>
	<template #bodyCell="{ column, record, index }">
	      <!-- 索引列 -->
	      <template v-if="column.key === 'index'">{{ index + 1 }}</template>
	 </template>
 </a-table>

实现效果
在这里插入图片描述
成功！