表格中对每一行进行编辑

Posted 2021-03-06 abking

使用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>