项目的组件二次封装简单易上手 (数据驱动进阶(2) vue) 告别野鸡代码

本文链接：https://blog.csdn.net/weixin_74956049/article/details/127710625

本文介绍了如何在Vue项目中进行组件的二次封装，特别是针对ElementUI表格的封装，利用数据驱动和插槽实现多样化需求。通过子组件和父组件的交互，告别混乱的代码。同时，讲解了插槽的三种用法：具名插槽、普通插槽和作用域插槽，帮助理解如何在父组件中填充子组件的占位符。

摘要由CSDN通过智能技术生成

效果图

一.数据驱动表格的二次封装

表格封装比较特殊这里需要用到插槽配合使用以满足多元化需求

这里如果你理解了插槽这里将会是很好理解,如果你对插槽不是很理解, 那么请继续往最下面翻有插槽详解

(1)子组件

<template>
  <div class="use-main">
    <div class="use-body">
      <div class="use-btns">
       // 普通插槽 占位符 这里我们在父组件内去调用这个占位符
        <slot name="add" />
       // 表格新增导入 导出 按钮控制 可以在组件内部 使用 也可以使用插槽的方式在父组件当中使用
        <el-button
          v-if="tableProps.isadd"
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="add"
          >新增</el-button>
        <el-button v-if="tableProps.isimport" type="primary" icon="el-icon-plus">导入 
      </el-button>
        <el-button v-if="tableProps.isexport" type="primary" icon="el-icon-plus">导出 
      </el-button>
        <el-button v-if="tableProps.isedit" type="primary" icon="el-icon-plus">修改</el- 
       button>

        <div style="clear: both" />
      </div>
      <el-table
        :data="dataListData"
        class="use-table"
        :max-height="tableProps.maxHeight ? tableProps.maxHeight : '340px'"
        @cell-click="handleCell"
        @row-click="handleRow"
      >
        <template v-for="(item, index) in tableProps.dataListParams">
       // 序号栏 type=index 开启序号
          <el-table-column
            v-if="item.type"
            :key="index"
            :type="item.type"
            :align="item.center"
            :label="item.label"
            :width="item.width ? item.width : 'auto'"
          />
       // 数据栏 占位 是否开启插槽
          <el-table-column
            v-if="!item.type"
            :key="index"
            :align="item.center"
            :prop="item.props"
            :label="item.label"
            :width="item.width ? item.width : 'auto'"
          >
            <template v-slot="{ row }"> 
      // 不开启插槽 使用默认传入数据
              <div v-if="!item.isSlot">{
  { row[item.props] }}</div>
      // 作用域插槽 显示的按钮在父组件dom内部自定义视图
              <div v-else><slot :name="item.props" :data="row" /></div>
            </template>
          </el-table-column>
        </template>
      </el-table>
     // 数据分页
      <div class="use-pagination">
        <el-pagination
          class="use-pagina