#vu3# element plus表格的序号字段

在Element Plus中，如果你想为表格添加一个序号字段，你可以使用index属性，并通过template或者slot来自定义序号的显示方式。

以下是一个简单的例子，展示如何在Element Plus的表格中添加序号字段：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 添加序号字段 -->
    <el-table-column type="index" label="序号">
      <!-- 自定义序号显示，比如序号前加上runoob前缀 -->
      <template #default="scope">
        runoob{{ scope.$index + 1 }}
      </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>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ... 其他数据
      ]
    };
  }
};
</script>

在这个例子中，<el-table-column type="index" label="序号"> 添加了一个序号字段，template #default="scope" 用于自定义序号的显示，scope.$index + 1 表示当前行的索引（从0开始计数）加1，展示为自定义的序号。