el-table-column使用插槽

el-table-column使用插槽是为了在表格列中插入自定义的内容。通过插槽，我们可以根据每一行的数据来渲染不同的内容，而不仅仅是显示原始数据。在ElementUI中，通过slot-scope属性值来调用row，可以获取到当前行的数据。

在给el-table-column绑定插槽时，可以使用slot-scope属性来指定作用域的变量名，通常使用"scope"作为变量名。在插槽内部，可以使用这个变量来获取当前行的数据，进行相关的操作。

例如，在给el-table-column添加一个操作列时，可以使用插槽来根据行数据的特定属性来显示不同的操作按钮。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
    <el-button type="danger" @click="delete(scope.row)">删除</el-button>
  </template>
</el-table-column>

以上示例中，我们使用scope.row来获取当前行的数据，并在插槽内部绑定了两个按钮，一个用于编辑操作，另一个用于删除操作。每个按钮都绑定了对应的方法，并将当前行的数据作为参数进行操作。

相关问题

<el-table :data="tableData" stripe size="medium" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="goodName" label="图书名称"></el-table-column> <el-table-column prop="price" label="图书单价"></el-table-column> <el-table-column prop="num" label="图书数量"></el-table-column> <el-table-column prop="img" label="图片"> <template v-slot="scope"> <el-image :src="scope.row.img" style="width: 100px; height: 100px"></el-image> </template> </el-table-column> 添加注释

这是一个使用了 Element UI 中的 el-table 组件展示数据的代码片段，其中：

- data 属性绑定了一个名为 tableData 的数组，用于存储要展示的数据。
- stripe 属性设置为 true，表示表格显示斑马线样式。
- size 属性设置为 medium，表示表格大小为中等。
- @selection-change 事件绑定了一个名为 handleSelectionChange 的方法，用于处理表格中选中行的变化。
- el-table-column 组件用于定义表格的列，其中 type="selection" 表示该列为复选框列，prop 属性指定了该列对应数据对象的属性名，label 属性指定了该列的表头名称，width 属性设置了该列的宽度，sortable 属性设置为 true，表示该列可以排序。
- 在第四列中，添加了一个插槽（slot），用于自定义该列的内容。在该插槽中，使用了 el-image 组件展示了图片。通过 scope.row.img 获取了该行数据对象中 img 属性的值，并将其作为 el-image 组件的 src 属性值。

<el-table :data="tableData"> 绑定数据列表 <el-table-column label='分类名称' prop="name"> 调取分类名称 </el-table-column> <el-table-column label='分类类型' prop="type"> 调取分类类型 </el-table-column> <el-table-column label='操作时间' prop="updateTime"> 调取操作时间 </el-table-column> <el-table-column label='排序' prop="sort"> 调取排序 </el-table-column> <el-table-column label='操作'> <template slot-scope="scope"> <el-button type="text" size="small" @click="dialogVisible=true">修改</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除</el-button> </template> </el-table-column>

这是一个使用 Element UI 的表格组件，通过绑定 tableData 数组来渲染数据列表。每个 el-table-column 标签中的 prop 属性用于指定要渲染的数据字段。在最后一个 el-table-column 标签中，使用了插槽来自定义操作列的内容，其中使用了 scope.slot-scope 属性来获取当前行的数据。点击修改按钮会触发 dialogVisible 变量的改变，从而显示一个弹窗用于修改数据。点击删除按钮会触发 deleteHandle 方法来删除当前行的数据。