在
获取父级`
el-
table`的`data`数据的
下标之前，您需要确定要
获取哪个父级`
el-
table`的`data`数据
下标。如果您已经确定了父级`
el-
table`的`data`
下标，您可以使用以下
方法来
获取它：
1. 在子级`
el-
table`的`row-click`事件
中，可以通过`$parent.$attrs.row`访问到父级`
el-
table`的当前
行数据。您可以通过遍历父级`
el-
table`的`data`数组找到该
行数据的
下标。
```html
<template>
<div>
<
el-
table :data="parent
TableData" @row-click="handleRowClick">
<
el-
table-column prop="name" lab
el="Name"></
el-
table-column>
<
el-
table-column prop="age" lab
el="Age"></
el-
table-column>
</
el-
table>
<
el-
table :data="child
TableData" :parent="$attrs.row">
<
el-
table-column prop="name" lab
el="Name"></
el-
table-column>
<
el-
table-column prop="age" lab
el="Age"></
el-
table-column>
</
el-
table>
</div>
</template>
<script>
export default {
data() {
return {
parent
TableData: [
{ name: 'Lucy', age: 20 },
{ name: 'Jack', age: 30 }
],
child
TableData: [
{ name: 'Tom', age: 25 },
{ name: 'Jerry', age: 35 }
]
}
},
methods: {
handleRowClick(row) {
const index = this.parent
TableData.findIndex(item => item === row)
console.log('parent
table data index:', index)
}
}
}
</script>
```
2. 如果您无法确定要
获取哪个父级`
el-
table`的`data`
下标，您可以在父级`
el-
table`
中通过`$emit`
方法触发一个自定义事件，并将当前
行数据和当前`
el-
table`的引用作为参数。在子级`
el-
table`
中监听该自定义事件，
获取父级`
el-
table`的引用，从而
获取父级`
el-
table`的`data`
下标。
```html
<template>
<div>
<
el-
table :data="parent
TableData" @row-click="handleRowClick">
<
el-
table-column prop="name" lab
el="Name"></
el-
table-column>
<
el-
table-column prop="age" lab
el="Age"></
el-
table-column>
</
el-
table>
<
el-
table :data="child
TableData" ref="child
Table">
<
el-
table-column prop="name" lab
el="Name"></
el-
table-column>
<
el-
table-column prop="age" lab
el="Age"></
el-
table-column>
</
el-
table>
</div>
</template>
<script>
export default {
data() {
return {
parent
TableData: [
{ name: 'Lucy', age: 20 },
{ name: 'Jack', age: 30 }
],
child
TableData: [
{ name: 'Tom', age: 25 },
{ name: 'Jerry', age: 35 }
]
}
},
methods: {
handleRowClick(row) {
this.$emit('parent-row-click', row, this.$refs.child
Table)
}
}
}
</script>
<template>
<div>
<
el-
table :data="child
TableData" @parent-row-click="handleParentRowClick">
<
el-
table-column prop="name" lab
el="Name"></
el-
table-column>
<
el-
table-column prop="age" lab
el="Age"></
el-
table-column>
</
el-
table>
</div>
</template>
<script>
export default {
data() {
return {
child
TableData: [
{ name: 'Tom', age: 25 },
{ name: 'Jerry', age: 35 }
]
}
},
methods: {
handleParentRowClick(row, parent
Table) {
const index = parent
Table.store.states.data.indexOf(row)
console.log('parent
table data index:', index)
}
}
}
</script>
```
2164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
