封装简单的table组件

最新推荐文章于 2024-08-02 17:01:38 发布
最新推荐文章于 2024-08-02 17:01:38 发布
阅读量1.8k 收藏 7
点赞数 2
分类专栏： Web前端开发入门教程 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48109675/article/details/128250435
版权

步骤：

1、封装一个table组件（子）

  • 子用prop接收传过来的数据 ：表头数据、表体数据等
  • 若子需要向父传递事件则用$emit

 

2、使用table的组件（父）

  • 在子标签上绑定传过去的数据

 

3、配置表头数据（个人习惯觉得代码更清晰）

  • 将表头数据独自创建的js中

 

封装的table组件（子）

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label
最低0.47元/天 解锁文章
京拾
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
封装ProTable组件
weixin_55652851的博客
07-13 701
封装ProTable组件
element ui 封装Table组件
m0_63542260的博客
06-12 1086
{ prop: 'name', label: '名称', useSlot: false, minwidth: '120px'},1.首先npm i element-ui -S 安装element-ui。tableColumns传入表头。tableData 传入数据。2.引入 Element。
Vue3-封装table组件
我是我
04-25 6455
在使用ant-design-vue中曾经使用过table组件，所以想着自己封装一个组件尝试一下，这是一个简易版本 1. 相关知识点 组件传值 插槽(具名插槽、作用域插槽) vue3 setup 2.封装子组件，按照要求规定参数 封装一个名为Ttablede组件，该组件接收两个参数，分别是columns和dataSource 2.1 子组件：接收参数，按数据提取动态具名插槽名 子组件：接收父组件传入的参数，并将传入的参数进行处理，提取出slot插槽值，用于动态设置具名插槽 import {compute
Vue基础篇--table的封装
YYY1920的博客
06-04 467
table 表格封装
封装Table组件
wancaicai_的博客
07-20 81
【代码】封装Table组件。
简单table组件的封装
weixin_44731125的博客
04-09 2077
简单table组件的封装 前言 写项目时一直用的都是封装好的table组件，对其内在并未深入了解，自己手动封装一个简单的组件，加深对各类封装好的table组件的了解。接下来的内容都是类比于antd中的table组件 注意： 既然是封装表格，那么就需要使表格尽可能符合多种业务场景，下面我封装的表格只针对业务内容展示进行处理，并不针对样式，样式也可类比。 首先要思考table组件需要什么？？？ 列数据（columns）- 即表头 行数据（dataSource）- 每一行需要展示的内容 接下来进行封装 /
react 封装通用组件之table组件
weixin_44160385的博客
07-20 5887
react 常用组件API调用的模块化封装–table组件 工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的...
基于element ui封装table组件
m0_58565372的博客
12-28 1905
以上就是基于element ui封装table组件。1.封装表格代码如下。
Vue3和ElementPlus封装table组件
广漂程序猿DevinRock
03-03 1696
Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。简单理解：就是对子组件的扩展，通过 插槽向子组件内部指定位置传递内容。插槽是组件的一块HTML模板，这块模板显示不显示，怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。
react 封装表格组件_react 封装通用组件之table组件
weixin_39671964的博客
12-21 1496
react 封装通用组件之table组件工作中发现我们在做react后台管理系统的时候，会有大量重复的页面(如下图)，比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。table表格的...
Element + Vue 封装的table组件
12-07
本项目以"Element + Vue 封装的table组件"为主题，通过基于Element-ui进行二次开发，实现了一个高度可配置的表格组件，旨在简化报表开发过程，提高开发效率。 首先，我们要理解Vue组件化开发的核心思想。Vue组件是...
vue element-ui table 组件封装使用
06-07
Table组件在实际项目中经常用于展示数据，但每个项目的需求可能各不相同，因此对其进行封装能提高代码复用性，减少重复工作。以下是对“vue element-ui table 组件封装使用”这一主题的详细讲解。 首先，我们来看...
基于Element封装一个表格组件tableList的使用方法
10-15
主要介绍了基于Element封装一个表格组件tableList的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于iview二次封装实用组件
04-14
本主题聚焦于"基于iview二次封装实用组件"，这是一个针对iview UI库进行定制和扩展的过程，旨在优化开发流程，提升用户体验。 iview是一个流行的Vue.js UI框架，提供了丰富的预设组件，如按钮、表格、表单、模态框...
封装Vue Element的table表格组件的示例详解
10-14
最后，封装的Vue Element table组件示例中，表格的每一列都是根据配置动态生成的，这极大地提高了组件的可配置性。同时，通过传递自定义的配置，可以灵活地实现各种复杂的需求，比如自定义列的渲染逻辑、排序、过滤...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 1072
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1366
本文介绍了电子签名、图片合成、及预览功能
子路由的配置方法？
最新发布
weixin_56187723的博客
08-02 218
首先，在Vue Router中定义父路由。父路由可以像其他普通路由一样定义，但通常会有一个组件与之关联，这个组件将作为子路由的容器。// 这里不需要直接定义子路由，但父组件需要准备好嵌套路由的容器},// 其他路由...
封装table组件
05-26
封装Table组件可以使代码更加简洁、易读，并且可以复用。以下是一个简单的封装Table组件的示例： ``` import React from 'react'; import PropTypes from 'prop-types'; import { Table } from 'antd'; const CustomTable = ({ columns, dataSource, loading, pagination }) => { return ( <Table columns={columns} dataSource={dataSource} loading={loading} pagination={pagination} /> ); }; CustomTable.propTypes = { columns: PropTypes.array.isRequired, dataSource: PropTypes.array.isRequired, loading: PropTypes.bool.isRequired, pagination: PropTypes.object.isRequired, }; export default CustomTable; ``` 在这个示例中，我们使用了Ant Design的Table组件，并将其封装为CustomTable组件。CustomTable组件接收四个props：columns（表格列的配置描述）、dataSource（表格数据）、loading（表格是否正在加载）和pagination（分页器的配置项）。这些props都是必需的，并且我们使用PropTypes对其进行了类型检查。 使用CustomTable组件时，只需要像下面这样传入props即可： ``` import React from 'react'; import CustomTable from './CustomTable'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, ]; const dataSource = [ { key: '1', name: 'John Brown', age: 32, }, { key: '2', name: 'Jim Green', age: 42, }, ]; const pagination = { pageSize: 10, }; const Example = () => { return ( <CustomTable columns={columns} dataSource={dataSource} loading={false} pagination={pagination} /> ); }; export default Example; ``` 以上就是一个简单的封装Table组件的示例。根据实际需求，可以在CustomTable组件中添加更多的props和配置项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值