当前位置：首页 > news >正文

el-table通过scope.row获取表格每列的值，以及scope.$index

news 2025/7/15 15:57:50

      <el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="ID" width="80"></el-table-column><el-table-column prop="name" label="文件名称"></el-table-column><el-table-column prop="type" label="文件类型"></el-table-column><el-table-column prop="size" label="文件大小(kb)"></el-table-column><el-table-column label="下载"><template slot-scope="scope"><el-button type="primary" @click="download(scope.row.url)">下载</el-button></template></el-table-column><el-table-column label="启用"><template slot-scope="scope"><el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" @change="changeEnable(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作"  width="200" align="center"><template slot-scope="scope"><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='我再想想'icon="el-icon-info"icon-color="red"title="您确定删除吗？"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table>
---------------------------------------------------------------------------------data() {return {tableData: [],}}
---------------------------------------------------------------------------------
load() {this.request.get("/file/page", {params: {pageNum: this.pageNum,pageSize: this.pageSize,name: this.name,}}).then(res => {this.tableData = res.data.recordsthis.total = res.data.total})

如上所示，scope.row是一个双向绑定的过程，当前行数据的获取也会用到插槽,scope相当于一行的数据， scope.row相当于当前行的数据对象。我们这里的scope绑定到了tableData。tableData在通过res.data.records调用返回值拿到后台数据库的数据，这样scope.row就会显示数据库对应条目数据，也可以进行传值到后端进行修改。

label是显示的文字

prop是对应获取数据的属性名

scope.row.xxx是获取相对应的一个表格中的数据

scope.$index是获取这一行的索引