如何二次封装一个el-table组件并二次复用

这篇具有很好参考价值的文章主要介绍了如何二次封装一个el-table组件并二次复用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

*注:示例使用的是vue3和element+进行二次封装的

首先我们来看效果图(总共可以分为以下几个模块):

如何二次封装一个el-table组件并二次复用,vue.js,elementui,前端

  1. 表格数据操作按钮区域
  2. 表格信息提示区域
  3. 表格主体内容展示区域
  4. 表格分页区域

表单搜索没有封装在这里是为了降低代码的耦合性(有兴趣的可以查看我之前写的搜索框封装如何封装一个后管的输入框按钮组件基础版(可多次复用)_小羊集事笨的博客-CSDN博客)

以下是代码:

<script setup>
import { computed, ref } from "vue"
const props = defineProps({
  // 表格按钮个数
  btnArray: {
    type: Array,
    default: () => []
  },
  // 是否显示右侧提示
  showTip: {
    type: Boolean,
    default: false
  },
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  //数据的条数
  total: {
    type: Number,
    default: 0
  },
  // 头部字段
  fields: {
    type: Array,
    default: () => []
  },
  // 字典(状态值,例如:0开始,1进行中,2结束)
  dict: {
    type: Object,
    default: () => {}
  },
  // 是否可选
  tableSelect: {
    type: Boolean,
    default: false
  },
  // 是否显示序号
  tableIndex: {
    type: Boolean,
    default: false
  },
  // 是否需要加载层
  loading: {
    type: Boolean,
    default: false
  },
  page: Number,
  pageSize: Number
})

const operation = ref(null)
// 动态计算操作列宽度
const winth = computed(() => {
  const length = operation.value?.$el.children.length
  const btnsWidth = length * 15 + length * 50
  return btnsWidth
})
// 车位总数
const sum = ref(666)
//动态计算占比
const Proportion = computed(() =>  props.total / sum.value )
const emit = defineEmits(["btnHandle", "selectionChange", "sizeChange", "currentChange"])

// 切换条数
const sizeChange = (ev) => {
  emit("sizeChange", ev)
}
// 切换页数
const currentChange = (ev) => {
  emit("currentChange", ev)
}

// 获取按钮颜色
const getColor = (name) => {
  if (name == "批量删除") {
    return ""
  }
  return "primary"
}

// 点击头部按钮
const btnHandle = (name) => {
  emit("btnHandle", name)
}

// 点击选择框
const selectionChange = (ev) => {
  emit("selectionChange", ev)
}

// 字典,处理数字对应的映射字段
const filterDictType = (value, array, code = "value", name = "label") => {
  if (!value && value !== 0) {
    // 要把0摘出来,一般0都是正常的数据,所以不能只用  !value
    return ""
  }
  const findObj = array.find((item) => item[code] === value.toString() || item[code] === +value) // 字符型数值型都得匹配

  if (find) {
    return findObj[name]
  } else {
    // 没有匹配的就原样返回
    return value
  }
}
</script>

<template>
  <el-card>
    <!-- 头部按钮 -->
    <div class="table-header">
      <div class="header-button">
        <el-button v-for="item in btnArray" :key="item" :type="getColor(item)" @click="btnHandle(item)">{{
          item
        }}</el-button>
      </div>

      <el-alert
        v-if="showTip"
        :title="`本园区共计 ${sum} 个车位,月卡用户 ${total}人,车位占有率 ${Proportion}%`" 
        show-icon
        :closable="false"
      />
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" v-loading="loading" style="width: 100%" @selection-change="selectionChange">
      <el-table-column v-if="tableSelect" type="selection" width="55" />
      <el-table-column v-if="tableIndex" label="序号" type="index" width="55" />
      <template v-for="(item, index) in fields" :key="index">
        <el-table-column
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
          :width="item.label.indexOf('时间') >= 0 ? 220 : ''"
          min-width="140"
        >
          <template v-slot="{ row }">
            <!-- 处理根据不同的值显示不同的内容 -->
            <div v-if="item.dictType">
              {{ tableData.length && filterDictType(row[item.prop], dict[item.dictType]) }}
            </div>
            <!-- 可点击td -->
            <el-link v-else-if="item.isHandle" @click="tdHandle(row.id, item.label, row)">{{ row[item.prop] }}</el-link>
            <!-- 可解析html -->
            <span v-else-if="item.isHtml" v-html="row[item.prop]" />
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
      <!-- 操作列 -->
      <el-table-column ref="operation" :width="winth + 'px'" fixed="right" label="操作">
        <template v-slot="{ row }">
          <slot :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row justify="end">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40, 50]"
        :total="total"
        :page-size="pageSize"
        :currentPage="page"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped>
.table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .el-alert--info.is-light {
    height: 40px;
    font-size: 14px;
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    :deep(.el-alert__title) {
      color: #000000d9;
    }
  }
}

.el-alert {
  width: auto;
}

.el-pagination {
  margin: 16px 0;
}

:deep(.el-card__body) {
  padding-bottom: 0;
}

.el-card.is-always-shadow {
  box-shadow: none;
  border: none;
}
</style>

这段代码是一个Vue组件,它定义了一个可重用的表格组件,具有以下功能:

  1. <script setup>标签中,使用Vue 3的definePropsdefineEmits函数定义了组件的属性(props)和事件(emits)。

    • btnArray:表格按钮的数组,默认为空数组。
    • showTip:是否显示右侧提示,默认为false。
    • tableData:表格数据的数组,默认为空数组。
    • total:数据的条数,默认为0。
    • fields:头部字段的数组,默认为空数组。
    • dict:字典,用于处理数字对应的映射字段,默认为空对象。
    • tableSelect:是否可选,布尔值,默认为false。
    • tableIndex:是否显示序号,布尔值,默认为false。
    • loading:是否需要加载层,布尔值,默认为false。
    • page:当前页数,数字类型。
    • pageSize:每页显示的条数,数字类型。
  2. 使用ref函数创建了operationsum的引用,以及计算属性winthProportion

    • operation:操作列的引用。
    • sum:车位总数,默认为666。
    • winth:动态计算操作列的宽度。
    • Proportion:动态计算数据条数占总数的比例。
  3. 使用defineEmits函数定义了四个事件:btnHandleselectionChangesizeChangecurrentChange

  4. 定义了一些辅助函数:

    • sizeChange:切换条数的函数,当条数发生变化时触发sizeChange事件。
    • currentChange:切换页数的函数,当页数发生变化时触发currentChange事件。
    • getColor:根据按钮名称返回按钮颜色的函数。
    • btnHandle:点击头部按钮的函数,当按钮被点击时触发btnHandle事件。
    • selectionChange:点击选择框的函数,当选择框的状态发生变化时触发selectionChange事件。
    • filterDictType:根据字典处理数字对应的映射字段的函数。
  5. <template>标签中,使用Element UI的组件构建了一个表格和分页器的布局。

    • <el-card>:卡片容器。
    • <div class="table-header">:表格头部,包含按钮和提示信息。
    • <el-button>:头部按钮,根据btnArray中的按钮数组动态生成。
    • <el-alert>:右侧提示信息,显示车位总数、总人数和占有率。
    • <el-table>:表格组件,用于显示表格数据。
    • <el-table-column>:表格列组件,根据fields数组动态生成表格列。
    • <el-link>:可点击的表格单元格。
    • <span>:普通的表格单元格。
    • <slot>:插槽内容,用于显示操作列的自定义按钮或组件。
    • <el-pagination>:分页器组件,根据数据条数、当前页数和每页条数进行分页。

这个表格组件可以根据传入的属性和事件进行配置,生成一个带有按钮、提示信息、可选、序号、加载层、分页等功能的表格,并支持自定义操作列的按钮或组件。文章来源地址https://www.toymoban.com/news/detail-597276.html

到了这里,关于如何二次封装一个el-table组件并二次复用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue封装el-table表格组件

    先上效果图: 本文包含了具名插槽、作用域插槽、jsx语法三种: Render.vue( 很重要,必须有 ): Table.vue 使用Table组件

    2024年02月20日
    浏览(41)
  • element-ui的table实现滚动加载,涵el-table组件封装一份

    重点就是 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e n e r 函数,想快点弄上去看效果的直接弄这个函数吧 如果不在mounted中则一定要this.$nextTick(() = this.addRollListener()) 示例代码 如果你把上面的看过了;只需要在 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e

    2023年04月08日
    浏览(62)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(56)
  • elemeentui el-table封装

    elemeentui el-table封装 

    2024年01月19日
    浏览(44)
  • 如何使用element-ui相关组件如:el-select,el-table,el-switch,el-pagination,el-dialog

    element-ui 官方链接: 组件 | Element https://element.eleme.cn/#/zh-CN/component/installation userTypeOptions后端响应的对象数组数据 表格中添加模板的作用域实现 异步处理 监听status的状态 权限修改异步处理: 几个监听函数与异步请求 axios实现发送异步请求 监听弹窗

    2024年02月07日
    浏览(53)
  • 在配置了 el-table 组件的合计行后,由于elementUI 表格el-table设置高度之后,合计行功能不会显示

    在配置了 el-table 组件的合计行后,由于elementUI 表格el-table设置高度之后,合计行功能不会显示 根据调试,发现该问题应该属于组件bug,表格主体中给 footer 留的高度不够导致,重新设置即可。 添加生命周期钩子 updated ,对 table 组件重新布局即可解决问题。具体如下: Vue 文

    2024年02月07日
    浏览(59)
  • 解决el-table组件中,分页后数据的勾选、回显问题?

    问题描述:         1、记录一个弹窗点击确定按钮后,table列表所有勾选的数据信息         2、再次打开弹窗,回显勾选所有保存的数据信息         3、遇到的bug:切换分页,其他页面勾选的数据丢失;点击确认只保存当前页的数据;勾选数据保存后但并未回显

    2024年02月08日
    浏览(108)
  • el-table组件的el-table-column电脑端使用fixed属性固定,移动端不使用固定,怎么实现?

           要在电脑端使用 fixed 固定列,而在移动端不使用,可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码:        在上面的示例中,我们使用 isDesktop 数据属性来判断当前设备是否为电脑端。通过监听窗口的 resize 事件,动态更新 isDesktop 的值。然后

    2024年02月15日
    浏览(46)
  • el-table-如何刷新表格数据

    表格里面的数据更新后,可以通过以下方法来刷新表格 方法一  用更新后的数据,覆盖之前的数据 var newTableData=[]; for(var i=0;ithat.tableData.length;i++){        if(aId==that.selectStationIdbId==that.selectDeviceId){         that.tableData[i].physicalid=physicalId;     }     newTableData.push(that.tableData[i

    2024年02月09日
    浏览(35)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包