前端el-table-column使用template的新发现哈哈哈

记录一次无脑copy代码发现的新知识哈哈哈

新知识自己要去查阅相关知识学习，这里我没有描述噢

在el-table中的列el-table-column使用了多个button时，每个button都添加了<template slot-scope="scope">标签，导致只有其中一个button会展示。如：图一

问题代码如下：

<el-table>
  ...
  <el-table-column fixed="right" align="center" width="160" label="操作">
     <template slot-scope="scope">
        <el-button type="text" @click="update(scope.row.id)">编辑</el-button>
      </template>
      <template slot-scope="scope">
        <el-button type="text" @click="select(scope.row.id, '1')">查看</el-button>
      </template>
      <template slot-scope="scope">
        <el-button type="text" @click="deleteInfo(scope.row.id)">删除</el-button>
      </template>
      <template slot-scope="scope">
        <el-button type="text" @click="examin(scope.row.id)">审核</el-button>
      </template>
  </el-table-column>
  ...
</el-table>

图一：

上述代码页面效果只会渲染最后一个 template（即“审核”按钮），因为前面的 template 被后面的覆盖了 。

问题描述：

在el-table中的列el-table-column使用了多个button时，每个button都添加了<template slot-scope="scope">标签，导致只有其中一个button会展示：只展示“审核”按钮

问题分析：

通过查阅资料发现 ：

在 Vue 和 Element UI 中，不能在同一个 el-table-column 中直接放置多个 template 标签，除非每个 template 标签都使用了不同的具名插槽。通过使用具名插槽（slot）区分它们。非必要不使用。我这里的业务没有特殊的需求，因此没必要使用具名插槽。

对于同一个 el-table-column，通常不需要使用具名插槽，因为每一列通常只包含一个模板内容。

问题解决：

修改代码：el-table-column 中只定义一个template，并将所有的button都放在这一个template中

<el-table>
  <el-table-column fixed="right" align="center" width="160" label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="update(scope.row.id)">编辑</el-button>
      <el-button type="text" @click="select(scope.row.id, '1')">查看</el-button>
      <el-button type="text" @click="deleteInfo(scope.row.id)">删除</el-button>
      <el-button type="text" @click="examin(scope.row.id)">审核</el-button>
    </template>
  </el-table-column>
</el-table>

修改代码后页面效果 ：

 

插槽（Slots）和具名插槽（Named Slots）

具体什么是插槽和具名插槽（slot），如何和template配合使用建议自己去查阅资料学习噢。

插槽（Slots）

插槽是Vue.js中一种非常强大和灵活的功能，用于在组件之间传递内容。它允许父组件在其模板中预留出一些位置，并且在运行时动态地将任意内容插入这些位置。这种机制使得组件更具可复用性和灵活性，能够以一种通用的方式接受输入内容。

具名插槽（Named Slots）

1. 定义：具名插槽是插槽的一种特殊形式，它允许父组件在子组件中定义多个插入位置，并分别指定每个位置的名字。这样，父组件就可以更精确地控制内容的插入位置。
2. 特点：
   • 父组件决定结构和数据：与默认插槽一样，父组件负责提供要插入到具名插槽中的HTML、文本、其他组件等内容。
   • 灵活性：由于具名插槽可以定义多个插入位置，因此父组件可以根据需要动态地插入不同的内容，从而在不同的上下文中复用同一个子组件。
   • 命名：每个具名插槽都有一个唯一的名称，父组件通过指定这个名称来向对应的插槽插入内容。
3. 使用方法：
   • 在子组件中定义具名插槽：使用<slot>标签，并为每个插槽分配一个唯一的name属性。
   • 在父组件中使用具名插槽：使用<template>标签，并通过v-slot指令或#指令来指定要插入的具名插槽的名称。然后，在<template>标签内部放置要插入的内容。

总结

插槽和具名插槽是Vue.js中用于组件间内容传递的重要机制。插槽允许父组件向子组件传递任意内容，而具名插槽则允许父组件更精确地控制内容的插入位置。这两种机制都增强了Vue组件的复用性和灵活性，使得开发者能够更高效地构建复杂的用户界面。