element组件中table中数据遍历的索引和单个对象

我不是女神ヾ 2022-01-31 23:59 293阅读 0赞

## 给你的按钮标签上加上以下代码 ##

nodejs中element组件中遍历时候的索引及对象。

**scope.row代表当前遍历的子对象，scope.$index代表遍历时索引**

<template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>

`scope.$index`表示当前对象的索引  
`scope.row`表示当前遍历的子对象

*  原本vue中遍历是`<li v-for="s in stus">{ {s.name}}</li>`  
    注意看v-for="(s,index) in stus，s代表当前遍历的子对象，index代表遍历时索引

<tr height="50px" v-for="(s,index) in stus">
    					<td>{
       {index+1}}</td>
    					<td>{
       {s.id}}</td>
    					<td>{
       {s.name}}</td>
    					<td>{
       {s.sex}}</td>
    					<td>{
       {s.hobbies}}</td>
    					<td>{
       {s.adress}}</td>
    					<td>{
       {s.beizhu}}</td>
    					<td><button type="button" @click="remove(index)">remove</button>
    						<button type="button" @click="update(s,index)">update </button>
    					</td>
    				</tr>

*  现在element组件中`<el-table :data="users" style="width: 100%"></>`  
    所以 scope.row代表当前遍历的子对象，scope.$index代表遍历时索引

<div class="grid-content bg-purple-light">
    	<el-table :data="stus" style="width: 100%;height: 450px; overflow-y: scroll;" >
    		<el-table-column prop="id" label="序号" width="80"></el-table-column>
    		<el-table-column prop="id" label="学号" width="80"></el-table-column>
    		<el-table-column prop="name" label="姓名" width="80"></el-table-column>
    		<el-table-column prop="sex" label="性别" width="80"></el-table-column>
    		<el-table-column prop="hobbies" label="爱好"></el-table-column>
    		<el-table-column prop="adress" label="籍贯"></el-table-column>
    		<el-table-column prop="beizhu" label="备注"></el-table-column>
    		<el-table-column prop="beizhu1" label="操作">
    		<template slot-scope="scope">
    			<el-button type="primary" @click="update(scope.row,scope.$index)">修改</el-button>
    		</template>
    		</el-table-column>
    	</el-table>
    </div>

--------------------

谢谢！

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关遍历对象中的属性和值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+哭是因爲堅強的太久メ/ 2023年01月20日 11:46/ 0 赞/ 147 阅读

相关 VUE 在Element Table组件中实现打印

1. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nh

灰太狼/ 2022年11月20日 10:56/ 0 赞/ 613 阅读

相关 Vue中v-for遍历数组和对象

遍历数组 ![20210812093553193.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

绝地灬酷狼/ 2022年09月04日 07:46/ 0 赞/ 167 阅读

相关浅析Lua中table的遍历

转载自：http://rangercyh.blog.51cto.com/1444712/1032925/ 当我在工作中使用lua进行开发时，发现在lua中有4种方式

一时失言乱红尘/ 2022年08月07日 00:25/ 0 赞/ 144 阅读

相关浅析Lua中table的遍历

转自：[http://rangercyh.blog.51cto.com/1444712/1032925][http_rangercyh.blog.51cto.com_14447

浅浅的花香味﹌/ 2022年08月06日 01:30/ 0 赞/ 173 阅读

相关 element ui 中的popover组件在table列表中使用的bug

bug场景： ![70][] 在列表数据中使用，点击对应的查看按钮，每一页的最后一个无法正确弹出这个红色框，别的都是正常的。查看代码： <el

矫情吗；*/ 2022年05月26日 07:27/ 0 赞/ 273 阅读

相关 vue中遍历对象

vue中遍历对象的方法就是JavaScript的方法，有多种方法：第一种：in vue中在计算属性中，定义一个函数letters，因为要把letters用作数组，所以在l

- 日理万妓/ 2022年04月10日 20:01/ 0 赞/ 586 阅读

相关 json学习-嵌套对象中数组的遍历

定义json对象 var myObj={ "name":"OY", "num":16110126, "sites"

一时失言乱红尘/ 2022年04月03日 10:38/ 0 赞/ 412 阅读

相关 element组件中table中数据遍历的索引和单个对象

给你的按钮标签上加上以下代码 nodejs中element组件中遍历时候的索引及对象。 scope.row代表当前遍历的子对象，scope.$index代表遍历时索引

我不是女神ヾ/ 2022年01月31日 23:59/ 0 赞/ 294 阅读

相关 9、遍历数组和对象

遍历数组和对象 1、循环遍历 2、检查数组更新 -------------------- 1、循环遍历 <!DOCTYPE html>

蔚落/ 2021年09月25日 04:20/ 0 赞/ 417 阅读