vue3 el-table 行号

在 Vue 3 中，使用 Element Plus 的 <el-table> 组件来创建表格时，如果你想添加行号（即每一行的编号），可以通过自定义列来实现。下面是如何实现的步骤：

1. 安装 Element Plus

首先，确保你已经安装了 Element Plus。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install element-plus --save
# 或者
yarn add element-plus

2. 在你的 Vue 组件中引入 Element Plus 的 <el-table> 和 <el-table-column>

import { ElTable, ElTableColumn } from 'element-plus';
 
export default {
  components: {
    [ElTable.name]: ElTable,
    [ElTableColumn.name]: ElTableColumn
  }
}

3. 在模板中使用 <el-table> 和添加行号列

在你的 Vue 组件的模板部分，使用 <el-table> 组件，并通过 <el-table-column> 添加一个自定义的列来显示行号。你可以通过计算属性或者方法来实现这一功能。

方法一：使用计算属性

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" label="行号" width="50"></el-table-column>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
import { ElTable, ElTableColumn } from 'element-plus';
 
export default {
  components: {
    [ElTable.name]: ElTable,
    [ElTableColumn.name]: ElTableColumn
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '张小刚',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  }
}
</script>

方法二：使用方法生成行号（例如，自定义序号）

如果你需要更复杂的行号逻辑（例如，基于某些条件显示不同的行号），你可以使用一个方法在 el-table-column 的 render 函数中生成行号。

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="行号" width="50">
      <template #default="{ $index }">
        {{ getCustomIndex($index) }}
      </template>
    </el-table-column>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
import { ElTable, ElTableColumn } from 'element-plus';
 
export default {
  components: {
    [ElTable.name]: ElTable,
    [ElTableColumn.name]: ElTableColumn
  },
  data() {
    return {
      tableData: [{ /* ... */ }] // 数据同上示例
    }
  },
  methods: {
    getCustomIndex(index) {
      // 例如，你可以根据条件修改行号显示逻辑，这里只是简单返回索引值加一作为示例。实际项目中可以根据需要定制。
      return index + 1; // 加一是因为数组索引从0开始，而我们通常期望行号从1开始。
    }
  }
}
</script>

这两种方法都可以实现在 Element Plus 的 <el-table> 中添加行号的功能。选择适合的。