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

vue3 使用element-plus 如何再次封装table组件

• vue3 使用element-plus 如何再次封装table组件

• 基本步骤

• 创建子组件:

• 默认数据配置

• 在需要使用自定义 Table 组件的地方引入并使用:

创建子组件:

创建一个新的 .vue 文件,例如子组件 baseTable.vue,作为你封装后的 Table 组件。

 <template>
    <div class="base-table-wrapper">
        <el-table :data="tableData" style="width: 100%">
            <template v-for="item in column" :key="item.prop">
                <el-table-column :prop="item.prop" :label="item.label" :width="item.width">
                    <template #default="scope" v-if="!!item.isScope">
                        <slot :name="item.prop+'ScopeContent'" :row="scope.row" />
                    </template> 
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script setup>

const props = defineProps({
    column: {
        type: Array,
        default() {
            return []
        }
    },
    tableData: {
        type: Array,
        default() {
            return []
        }
    },
})

</script>

<style lang="scss" scoped></style>

在需要使用自定义 Table 组件的地方引入并使用:

<template>
<base-table :column="tableColumn" :tableData="recordList"> 
    <!-- 刷卡时间自定义内容 -->
    <template #createTimeScopeContent="slotProps" > 
        <span>{{ parseTime(slotProps.row.eventTime) }}</span>
    </template> 
    <!-- // 刷卡时间自定义内容 -->

    <!-- 事件自定义内容 -->
    <template #typeScopeContent="slotProps" >  
        <dict-tag :options="entrance_type" :value="slotProps.row.event" />
    </template>
    <!-- // 事件自定义内容 --> 


    <!-- 部门自定义内容 -->
    <template #deptNameScopeContent="slotProps" >  
        <span>{{ slotProps.row.deptName || "无" }}</span> 
    </template>
    <!-- // 部门自定义内容 -->  

    <!-- 刷卡地点自定义内容 -->
    <template #controllerNameScopeContent="slotProps" > 
        <dict-tag :options="controller_name" :value="slotProps.row.controllerName" />
    </template>
    <!-- // 刷卡地点自定义内容 --> 
</base-table> 
</template>

<script setup>
const tableColumn = ref([
   {
      label: "刷卡时间",
      prop: "createTime",
      width: "180",
      align: "center",
      isScope: true
   }, {
      label: "事件",
      prop: "type",
      width: "auto",
      align: "center",
      isScope: true
   }, {
      label: "姓名",
      prop: "staffName",
      width: "auto",
      align: "center"
   }, {
      label: "卡号",
      prop: "cardNo",
      width: "auto",
      align: "center"
   }, {
      label: "部门",
      prop: "deptName",
      width: "auto",
      align: "center",
      isScope: true
   }, {
      label: "刷卡地点",
      prop: "controllerName",
      width: "auto",
      align: "center",
      isScope: true
   }
])
</script>

在 Vue 3 中,你可能会遇到“具名插槽”(Named Slots)的概念,它允许你在组件内部定义特定的插槽位置,并在父组件中为这些具名插槽提供内容。

以下是如何在Vue 3中使用具名插槽的一个基本示例:

  1. 首先,在子组件(ChildComponent.vue)中定义一个具名插槽:
<template>
  <div>
    <h2>这是子组件的标题</h2>
    <slot name="description">默认描述内容</slot>
    <slot name="footer">默认页脚内容</slot>
  </div>
</template>

在这个例子中,我们定义了两个具名插槽:description 和 footer,并且都提供了默认内容。

  1. 然后,在父组件中使用这个子组件并填充具名插槽:
<template>
  <ChildComponent>
    <template v-slot:description>
      <p>这是来自父组件的描述内容</p>
    </template>
    
    <template v-slot:footer>
      <p>这是来自父组件的页脚内容</p>
    </template>
  </ChildComponent>
</template>

在父组件中,我们使用 v-slot 指令(也可以简写为 #)来指定要填充哪个具名插槽,并在其中提供相应的内容。这样,当渲染子组件时,就会在对应的位置插入这些内容。

vue3 使用具名插槽并且传递值

在 Vue 3 中,具名插槽不仅可以用于传递 HTML 结构,还可以配合作用域插槽(Scoped Slots)来传递数据。作用域插槽允许子组件向其插槽内传递数据,而父组件则可以通过插槽提供的回调函数来访问这些数据并在插槽内进行渲染。

下面是一个使用 Vue 3 中具名插槽结合作用域插槽传递值的例子:

子组件 (ChildComponent.vue):

<template>
  <div>
    <h2>这是子组件的数据列表</h2>
    <!-- 定义作用域插槽,传入一个数组 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item" name="listItem"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '第一条数据' },
        { id: 2, text: '第二条数据' },
        // ...
      ]
    }
  }
}
</script>

父组件:

<template>
  <ChildComponent>
    <!-- 使用 v-slot 指令接收子组件传递的 item 数据 -->
    <template #listItem="slotProps">
      <div>
        <p>ID: {{ slotProps.item.id }}</p>
        <p>内容: {{ slotProps.item.text }}</p>
        <!-- 这里可以根据 item 数据自定义渲染内容 -->
      </div>
    </template>
  </ChildComponent>
</template>

在上述例子中,子组件 ChildComponent 定义了一个具名插槽 listItem 并且每个插槽都绑定了一个 item 数据。

在父组件中,我们通过 v-slot:listItem=“slotProps” 来接收这些数据,并通过 slotProps.item 访问具体的 item 对象属性。这样父组件就可以根据传递过来的数据自行决定如何渲染每一项列表内容了。


http://www.kler.cn/a/274707.html

相关文章:

  • 点击展示大图预览
  • Hexo Next主题集成百度统计
  • 能否提供详细的海洋影视CMS安装步骤和指南?
  • 三、使用langchain搭建RAG:金融问答机器人--检索增强生成
  • Unity 开发Apple Vision Pro空间锚点应用Spatial Anchor
  • ArcGIS计算土地转移矩阵
  • 31-Java前端控制器模式(Front Controller Pattern)
  • LabVIEW NV色心频率扫描
  • 云原生:重塑未来应用的基石
  • DevEco Studio 项目创建
  • 解锁编程潜能:ChatGPT如何革新软件开发
  • 【RabbitMQ | 第一篇】消息队列基础知识
  • 海外社交营销为什么用云手机?不用普通手机?
  • 图像处理学习笔记(一)
  • LLM不仅仅是聊天应用,它们也可以提升制药销售团队的客户触达。
  • 【微服务】Gateway服务网关
  • [Python人工智能] 四十三.命名实体识别 (4)利用bert4keras构建Bert+BiLSTM-CRF实体识别模型
  • Python实战:TensorFlow与Keras
  • unity 学习笔记 4.坐标系
  • springboot2.7集成es8 https方式绕过证书访问集群
  • 32串口学习
  • 【图论】【深度优先搜索】【换根法】2858. 可以到达每一个节点的最少边反转次数
  • SpringMVC的执行原理
  • 「实战应用」如何用DHTMLX构建自定义JavaScript甘特图(二)
  • React简介
  • 在Ubuntu20.04(原为cuda12.0, gcc9.几版本和g++9.几版本)下先安装cuda9.0后再配置gcc-5环境