el-table通过scope.row获取表格每列的值,以及scope.$index
warning:
这篇文章距离上次修改已过477天,其中的内容可能已经有所变动。
在Vue.js中,使用Element UI库的el-table组件时,可以通过scope参数访问当前行的数据以及行索引。scope是一个包含当前行数据(scope.row)和索引(scope.$index)的对象。
以下是一个简单的例子,展示如何在el-table的<el-table-column>中使用scope.row和scope.$index来获取和显示每列的值:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
<template slot-scope="scope">
{{ scope.row.date }} - 索引: {{ scope.$index }}
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
{{ scope.row.address }}
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '赵小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '孙小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
}
};
</script>在这个例子中,el-table组件的:data属性绑定了一个包含多个对象的数组tableData,每个对象代表表格中的一行。在<el-table-column>中,使用template插槽和slot-scope="scope"来访问当前行的数据。scope.row代表当前行的数据对象,scope.$index代表当前行的索引。
评论已关闭