el-table通过scope.row获取表格每列的值,以及scope.$index
warning:
这篇文章距离上次修改已过201天,其中的内容可能已经有所变动。
在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
代表当前行的索引。
评论已关闭