vue3中element Plus插槽示例详解

 更新时间:2024年05月06日 09:44:55   作者:HWL5679  
这篇文章主要介绍了vue3中element Plus插槽,#default=scope定义了一个名为 default 的插槽,并将当前行的数据传递给一个名为 scope 的变量,本文结合示例代码介绍的非常详细,需要的朋友可以参考下

vue3中element Plus插槽,实现代码如下所示:

                <el-table-column property="" label="操作" width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <span @click="handleSimilarQuestion(scope.row)">相似问</span>
                        <span @click="handleEdit(scope.row)">编辑</span>
                        <!-- <span @click="printRow(scope.row)">删除</span> -->
                        <!-- 插槽 title记得加: -->
                        <el-popconfirm :title="`确认删除:  ${questionNum}  ?`" width="200" @confirm="confirmEvent"
                            @cancel="cancelEvent" confirm-button-text="确认" cancel-button-text="取消">
                            <template #reference>
                                <span @click="printRow(scope.row)">删除</span>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

js

// 问答库  删除函数
let questionNum = ref('')
function printRow(row: any) {
    // console.log(row.question); // 打印当前行的数据  
    questionNum.value = row.question
    // console.log(questionNum.value)
}
const confirmEvent = () => {
    console.log('确认删除')
}
const cancelEvent = () => {
    console.log('取消删除')
}
// 相似问
function handleSimilarQuestion(row:any) {  
    console.log(row);  
}  
// 编辑
function handleEdit(row:any) {  
    console.log(row); 
}  

#default="scope" 定义了一个名为 default 的插槽,并将当前行的数据传递给一个名为 scope 的变量。

<template #default="scope">

@click="printRow(scope.row)" 是一个事件监听器,它会在该 <span> 元素被点击时调用 printRow 函数,并将 scope.row(即当前行的数据)作为参数传递。

<span @click="printRow(scope.row)">删除</span>

当该函数被调用时,会使用 console.log 将参数 row 的内容打印到浏览器的控制台。

function printRow(row: any) {
console.log(row.question); // 打印当前行的数据  
}

到此这篇关于vue3中element Plus插槽的文章就介绍到这了,更多相关vue3 element Plus插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中forEach()的使用方法例子

    Vue中forEach()的使用方法例子

    这篇文章主要给大家介绍了关于Vue中forEach()使用方法的相关资料,forEach和map是数组的两个方法,作用都是遍历数组,在vue项目的处理数据中经常会用到,需要的朋友可以参考下
    2023-09-09
  • 解决threeJS加载obj gltf模型后颜色太暗的方法

    解决threeJS加载obj gltf模型后颜色太暗的方法

    这篇文章主要为大家介绍了解决threeJS加载obj gltf模型后颜色太暗的方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue分页组件实例代码

    Vue分页组件实例代码

    这篇文章主要为大家详细介绍了Vue分页组件的实例代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • ant design vue的form表单取值方法

    ant design vue的form表单取值方法

    这篇文章主要介绍了ant design vue的form表单取值方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Element Plus在el-form-item中设置justify-content无效的解决方案

    Element Plus在el-form-item中设置justify-content无效的解决方案

    这篇文章主要介绍了Element Plus在el-form-item中设置justify-content无效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue输入框状态切换&自动获取输入框焦点的实现方法

    Vue输入框状态切换&自动获取输入框焦点的实现方法

    这篇文章主要介绍了Vue输入框状态切换&自动获取输入框焦点的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • Vue2使用cube-ui 实现搜索过滤、高亮功能

    Vue2使用cube-ui 实现搜索过滤、高亮功能

    cube-ui 是基于 Vue.js 实现的精致移动端组件库,由于很长一段时间没有学习cube-ui 的功能实现示例代码了,今天通过本文给大家介绍下Vue2使用cube-ui 实现搜索过滤、高亮功能,感兴趣的朋友跟随小编一起看看吧
    2023-01-01
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • Vue.js bootstrap前端实现分页和排序

    Vue.js bootstrap前端实现分页和排序

    这篇文章主要为大家详细介绍了Vue.js结合bootstrap前端实现分页和排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue 使用formData方式向后台发送数据的实现

    Vue 使用formData方式向后台发送数据的实现

    这篇文章主要介绍了Vue 使用formData方式向后台发送数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论