前端el-table-column使用template的新发现哈哈哈
晨晨晨翔啊～126 2024-10-10 10:03:01 阅读 81
记录一次无脑copy代码发现的新知识哈哈哈
新知识自己要去查阅相关知识学习，这里我没有描述噢
在el-table中的列el-table-column使用了多个button时，每个button都添加了<template slot-scope="scope">标签，导致只有其中一个button会展示。如：图一
问题代码如下：
<code><el-table>
...
<el-table-column fixed="right" align="center" width="160" label="操作">code>
<template slot-scope="scope">code>
<el-button type="text" @click="update(scope.row.id)">编辑</el-button>code>
</template>
<template slot-scope="scope">code>
<el-button type="text" @click="select(scope.row.id, '1')">查看</el-button>code>
</template>
<template slot-scope="scope">code>
<el-button type="text" @click="deleteInfo(scope.row.id)">删除</el-button>code>
</template>
<template slot-scope="scope">code>
<el-button type="text" @click="examin(scope.row.id)">审核</el-button>code>
</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中
<code><el-table>
<el-table-column fixed="right" align="center" width="160" label="操作">code>
<template slot-scope="scope">code>
<el-button type="text" @click="update(scope.row.id)">编辑</el-button>code>
<el-button type="text" @click="select(scope.row.id, '1')">查看</el-button>code>
<el-button type="text" @click="deleteInfo(scope.row.id)">删除</el-button>code>
<el-button type="text" @click="examin(scope.row.id)">审核</el-button>code>
</template>
</el-table-column>
</el-table>
修改代码后页面效果 ：
插槽（Slots）和具名插槽（Named Slots）
具体什么是插槽和具名插槽（slot），如何和template配合使用建议自己去查阅资料学习噢。
插槽（Slots）
插槽是Vue.js中一种非常强大和灵活的功能，用于在组件之间传递内容。它允许父组件在其模板中预留出一些位置，并且在运行时动态地将任意内容插入这些位置。这种机制使得组件更具可复用性和灵活性，能够以一种通用的方式接受输入内容。
具名插槽（Named Slots）
定义：具名插槽是插槽的一种特殊形式，它允许父组件在子组件中定义多个插入位置，并分别指定每个位置的名字。这样，父组件就可以更精确地控制内容的插入位置。特点：
父组件决定结构和数据：与默认插槽一样，父组件负责提供要插入到具名插槽中的HTML、文本、其他组件等内容。灵活性：由于具名插槽可以定义多个插入位置，因此父组件可以根据需要动态地插入不同的内容，从而在不同的上下文中复用同一个子组件。命名：每个具名插槽都有一个唯一的名称，父组件通过指定这个名称来向对应的插槽插入内容。使用方法：
在子组件中定义具名插槽：使用<code><slot>标签，并为每个插槽分配一个唯一的name属性。在父组件中使用具名插槽：使用<template>标签，并通过v-slot指令或#指令来指定要插入的具名插槽的名称。然后，在<template>标签内部放置要插入的内容。
总结
插槽和具名插槽是Vue.js中用于组件间内容传递的重要机制。插槽允许父组件向子组件传递任意内容，而具名插槽则允许父组件更精确地控制内容的插入位置。这两种机制都增强了Vue组件的复用性和灵活性，使得开发者能够更高效地构建复杂的用户界面。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。