码迷,mamicode.com
首页 > 其他好文 > 详细

表格中对每一行进行编辑

时间:2020-03-08 19:30:51      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:primary   message   ima   click   修改   行编辑   temp   使用   let   

使用el-table标签的:data属性,可以设置数据源。

el-table-column用来设定 列级

通过slot-scope="scope"我们可以对每一行进行操作,只要把scope传入函数中,即可进行逻辑操作

 

 1         <el-table :data="messages">
 2             <el-table-column label="id">
 3                 <template slot-scope="scope">
 4                     <span>{{scope.row.id}}</span>
 5                 </template>
 6             </el-table-column>
 7             <el-table-column label="学号">
 8                 <template slot-scope="scope">
 9                     <span>{{scope.row.studentId}}</span>
10                 </template>
11             </el-table-column>
12             <el-table-column label="姓名">
13                 <template slot-scope="scope">
14                     <span>{{scope.row.name}}</span>
15                 </template>
16             </el-table-column>
17             <el-table-column label="年龄">
18                 <template slot-scope="scope">
19                     <span>{{scope.row.age}}</span>
20                 </template>
21             </el-table-column>
22             <el-table-column label="性别">
23                 <template slot-scope="scope">
24                     <span>{{scope.row.gender}}</span>
25                 </template>
26             </el-table-column>
27             <el-table-column label="修改">
28                 <template slot-scope="scope">
29                     <el-button type="primary" icon="el-icon-edit" circle @click="editMessage(scope)"/>
30                 </template>
31             </el-table-column>
32             <el-table-column label="删除">
33                 <template slot-scope="scope">
34                     <el-button type="danger" icon="el-icon-delete" circle @click="delMessage(scope)"/>
35                 </template>
36             </el-table-column>
37         </el-table>

 

表格中对每一行进行编辑

标签:primary   message   ima   click   修改   行编辑   temp   使用   let   

原文地址:https://www.cnblogs.com/ABKing/p/12443984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!