怎么获取当前的el-table-colum是el-table中的第几行
时间: 2023-10-14 14:26:36 浏览: 277
在 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 函数中加入对当前页数据的判断逻辑。
阅读全文