当前位置: 首页 > news >正文

vue3二次封装element-plus表格,slot透传,动态slot。

vue

    • 在一个组件中使用二次封装的表格组件,slot如何透传。
      • 例如:有3个组件,C1,C2,Table,C1组件使用了C2组件,C2组件使用了Table,那么在C1组件中如何把slot透传到Table组件中。
      • Table组件 `Table.vue` 在main.js 配置全局组件。
      • C2组件 `C2.vue`
      • C1组件 `C1.vue`
      • 在C1组件中正常展示tag

在一个组件中使用二次封装的表格组件,slot如何透传。

例如:有3个组件,C1,C2,Table,C1组件使用了C2组件,C2组件使用了Table,那么在C1组件中如何把slot透传到Table组件中。

Table组件 Table.vue 在main.js 配置全局组件。

	<template><el-table v-bind="$attrs"><template v-for="column in $attrs.columns"><el-table-column v-if="column.slotName" :key="column.prop" v-bind="column"><template #default="scope"><slot :name="column.slotName" v-bind="scope"></slot></template></el-table-column><el-table-column v-else :key="column.prop" v-bind="column" /></template></el-table></template><script setup></script>

C2组件 C2.vue

	<template><el-card>其他内容</el-card><el-card><Table v-bind="$attrs"><templatev-for="column in $attrs.columns.filter(i => i.slotName)" :key="column.slotName" #[column.slotName]="scope"><slot :name="column.slotName" v-bind="scope" /></template></Table></el-card></template><script lang="ts" setup></script>

C1组件 C1.vue

	<template><C2 :columns="tableColumns" :data="tableData"><template #status="{row}"><div><el-tag type="success">{{ row.status }}</el-tag></div></template></C2></template><script lang="ts" setup>import { ref } from "vue";const tableData = ref<Array<any>>([{id: 1, name: "JY-SZ-2023", createdtime: "2023-12-31", status: "正常"},{id: 2, name: "VC890D", createdtime: "2024-06-30", status: "正常"}])const tableColumns = [{"label": "ID","prop": "id",},{"label": "名称","prop": "name",},{"label": "创建时间","prop": "createdtime",},{"label": "状态","prop": "status","slotName": 'status',}]</script>

在C1组件中正常展示tag

在C1组件中正常展示tag

http://www.dtcms.com/a/499844.html

相关文章:

  • RDP 远程桌面连接常见问题详解:仅使用网络级别身份验证、微软账户密码、远程登录后的用户状态
  • C程序中的循环语句
  • 湖南省城乡建设厅网站邮箱网站怎么做
  • Linux基础指令(完结)、shell命令与Linux权限(1) |tar|bc|uname|热键|shutdown|shell|权限
  • 能看网站的浏览器wordpress 自定义注册表单
  • 佛山网页网站设计做网站要多少人
  • DeepSeek辅助利用搬移底层xml实现快速编辑xlsx文件的python程序
  • 营销型外贸网站建设医疗网站怎么做seo
  • 【Swift】LeetCode 3. 无重复的最长子串
  • 深圳品牌网站建设公司招聘百度账号中心官网
  • jdk.nio.zipfs 包详解
  • 小说网站建设目的车牌照损坏在网站做的能用吗
  • 专业提供网站建设服务包括wordpress 联系人表单
  • Spring 核心原理:Bean 作用域、生命周期与 SpringBoot 自动配置
  • [MLflow] 环境管理 | MLflow模型 | Flavors与pyfunc
  • iis网站防盗链浙江鼎兴建设有限公司网站
  • python+django/flask的在线心理咨询系统
  • 继电保护:距离保护:过渡电阻影响
  • FAST DDS-GEN--通过 IDL 定义数据类型
  • 网站建设推广信息企业网站 建设流程
  • 连云港建设局网站网站建设培训南宁
  • uni-ap 地图报错Map key not configured
  • 新版 perf 文件解读与性能分析
  • JAVA国际版图文短视频交友系统源码支持H5 + APP
  • 【图像处理】图片的前向映射与后向映射
  • K8S(十三)—— Helm3从入门到实战:简化Kubernetes应用部署与管理
  • 如何录制视频,用 OBS
  • 网站地址做图标大型公司网站建设
  • 图片下载网站哪个好自己建设博客网站
  • 宝安哪有网站建设网站制作公司优势