vue 获取elementUI中的el-table里每一行的index并传到方法中
在Vue中使用Element UI的el-table
组件时,可以通过el-table
的row-class-name
属性或者使用作用域插槽的方式来获取每行的索引,并将索引传递到方法中。
以下是一个使用作用域插槽的例子:
<template>
<el-table :data="tableData" style="width: 100%">
<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 label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.$index)">点击我</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎' },
{ date: '2016-05-04', name: '李小虎' },
// ...更多数据
]
};
},
methods: {
handleClick(index) {
console.log('行索引:', index);
// 在这里处理点击事件,并可以使用 index
}
}
};
</script>
在这个例子中,scope.$index
就是当前行的索引,在点击按钮时,会调用handleClick
方法,并将这个索引传递进去。
评论已关闭