el-table-v2 怎么显示行号

在el-table-v2中显示行号，可以在el-table-column中使用type="index"属性。例如：

<el-table :data="tableData">
  <el-table-column type="index" label="行号" width="100"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

这样就可以在表格中显示行号了。

相关问题

怎么获取当前的el-table-colum是el-table中的第几行

在 Element UI 的 el-table 组件中，el-table-column 是列组件，而不是行组件，所以无法通过找到 el-table-column 组件来获取它所在的行号。如果你要获取行号，需要在 el-table 的模板中使用 el-table-column 组件，并设置 :row-key 属性，这样 el-table-column 才能知道当前所在的行。

具体来说，你需要在 el-table 中设置 :row-key 属性，如下所示：

<el-table :data="tableData" :row-key="getRowKey">
  <el-table-column label="状态" min-width="130" fixed="right" align="center">
    <el-switch v-model="enable[findRowIndex()]" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" />
  </el-table-column>
  ...
</el-table>

其中，:row-key 属性绑定了一个函数 getRowKey，该函数用于返回每一行的唯一标识符。你需要根据你的数据结构来定义这个函数。

然后，你可以在 findRowIndex 函数中获取当前 el-table-column 所在的行号，代码如下：

methods: {
  findRowIndex() {
    let currentRow = this.$parent.row // 获取当前行的数据对象
    let rows = this.$parent.store.states.data // 获取所有行的数据对象
    for (let i = 0; i < rows.length; i++) {
      if (rows[i] === currentRow) {
        return i
      }
    }
    return -1 // 如果没找到，则返回 -1
  },
  getRowKey(row) {
    return row.id // 假设每一行的唯一标识符为 id 属性
  }
}

在这段代码中，findRowIndex 函数的实现和之前的类似，只是获取当前行和所有行的方式有所不同。具体来说，我们通过 this.$parent.row 来获取当前行的数据对象，通过 this.$parent.store.states.data 来获取所有行的数据对象。然后，我们遍历所有行的数据对象，如果找到当前行，则返回该行的索引；如果没找到，则返回 -1。

需要注意的是，如果你在 el-table 中使用了分页功能，那么只有当前页的数据会被渲染出来，而不是全部数据，这时候你需要在 findRowIndex 函数中加入对当前页数据的判断逻辑。

el-table 点击后显示第几行

如果你使用的是 Element UI 的 el-table 组件，你可以通过监听 row-click 事件来获取点击的行数据。具体实现可以参考以下代码：

<el-table @row-click="handleRowClick">
  <!-- 表格列 -->
</el-table>

export default {
  methods: {
    handleRowClick(row) {
      // 在这里处理点击行后的逻辑，row 参数表示点击的行数据
      console.log(row)
    }
  }
}

如果你想获取点击的行号，你可以在数据源中为每一行添加一个唯一的 id 字段，然后在 handleRowClick 方法中通过循环遍历数据源找到点击的行所在的索引号，例如：

<el-table :data="tableData" @row-click="handleRowClick">
  <!-- 表格列 -->
</el-table>

export default {
  data() {
    return {
      // 数据源
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      // 在这里获取点击的行号
      const rowIndex = this.tableData.findIndex(item => item.id === row.id)
      console.log(`点击了第 ${rowIndex + 1} 行`)
    }
  }
}