table组件抽离封装

已于 2023-02-03 17:25:35 修改
阅读量141 收藏 1
点赞数
分类专栏： elementUI 前端 vue 项目 文章标签： javascript 学习 vue.js
于 2022-06-13 17:04:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/colorful_S/article/details/125256860
版权
vue 项目 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
前端
6 篇文章 0 订阅
订阅专栏
elementUI
4 篇文章 0 订阅
订阅专栏

封装table组件（利用插槽）
直接贴图啦~：
公共组件：
在这里插入图片描述
在这里插入图片描述
在子组件用：
在这里插入图片描述
数据部分：
表头：
在这里插入图片描述
数据：
在这里插入图片描述
效果：在这里插入图片描述
补充功能：
1.增加多选
在这里插入图片描述
1.1 关于对多选的操作 注意:selectable=selectEnable() 方法
在这里插入图片描述

waitHiy.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table组件的固定列和表头 布局
arvin_top的博客
12-10 2108
固定列&表头 对于表格信息来说，往往有些信息是重要的，需要一目了然的看清楚，而不是通过滚动才能看到用户需要的信息。将关键的表格列进行固定，而次要信息放置在可滚动查看的容器中，可以突出表格信息的重要性，同时，对于方便用户更好的在当前窗口进行交互，而不需要更多的操作。 对于以上两种交互的优化，Ant Design - A UI Design Language给出了很好的示例。 对于固...
简单table组件的封装
weixin_44731125的博客
04-09 2072
简单table组件的封装 前言 写项目时一直用的都是封装好的table组件，对其内在并未深入了解，自己手动封装一个简单的组件，加深对各类封装好的table组件的了解。接下来的内容都是类比于antd中的table组件 注意： 既然是封装表格，那么就需要使表格尽可能符合多种业务场景，下面我封装的表格只针对业务内容展示进行处理，并不针对样式，样式也可类比。 首先要思考table组件需要什么？？？ 列数据（columns）- 即表头 行数据（dataSource）- 每一行需要展示的内容 接下来进行封装 /
h5封装table表格 vue
南佳的博客
02-02 1401
因某些原因,开发时总是需要在h5页面上开发表格, 所以就自己封装了一个, 这样就便于维护.一下直接提供源码, 不足之处, 请不吝赐教.
Vue组件的抽离和封装
bob的博客
07-25 1900
1.背景 日常开发中，有时候有些组件是功能类似甚至完全相同的情况，这个时候我们完全没必要再重新写一个， 可以抽离复用可以减少大量的时间，案例： 像一些App底部的标签页，在进行一些标签的跳转时，底部的只是变化选中时的字体颜色和图标， 大部分的元素都相同。 2.抽离思路 2.1先抽出一个大的可以装里面小组件的大容器TabBar <div class='tabBar'> <tab-bar-item v-for="(val,index) in navBar" :path='val
vue3 element Table组件+hook封装
Lidppp的博客
08-31 1537
vue3+ts封装Element Table
vue3的抽离封装方法
总结前端开发中遇到的问题，分享前端知识
08-04 1839
vue3中的任何一个组合式api都可以单独抽离出去在另一个文件，最后只需要回归到setup()中即可。
Element table组件封装 核心：父子组件传值、传方法
见贤思齐焉，见不贤内自省
06-24 2942
element 最近在APP上使用了element的表格，原因是vant上没table组件，所以在element的基础上简单的封装了一个组件 组件 tableElem.vue <template > <el-table id="immunityTadle" size="mini" :data="tableData" border :max-height="clientHeight" style="width: 100vw" @r
vue element-ui table 组件封装使用
06-07
Table组件在实际项目中经常用于展示数据，但每个项目的需求可能各不相同，因此对其进行封装能提高代码复用性，减少重复工作。以下是对“vue element-ui table 组件封装使用”这一主题的详细讲解。 首先，我们来看...
基于iview二次封装实用组件
04-14
本主题聚焦于"基于iview二次封装实用组件"，这是一个针对iview UI库进行定制和扩展的过程，旨在优化开发流程，提升用户体验。 iview是一个流行的Vue.js UI框架，提供了丰富的预设组件，如按钮、表格、表单、模态框...
Element + Vue 封装的table组件
12-07
本项目以"Element + Vue 封装的table组件"为主题，通过基于Element-ui进行二次开发，实现了一个高度可配置的表格组件，旨在简化报表开发过程，提高开发效率。 首先，我们要理解Vue组件化开发的核心思想。Vue组件是...
egrid:对 element-ui table 组件的封装
05-10
基于 Element-UI Table 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。 element 升级到了 2.0 了， 不用担心可以无缝升级的~ 文档 开发 npm run dev npm run build npm run doc 使用 安装 Element： ...
angular6的table组件开发的实现示例
10-17
在Angular 6中，开发自定义的table组件是一项常见的任务，尤其当项目中没有使用预构建的UI库时。在本文中，我们将深入探讨如何基于Angular 6实现一个table组件，以及涉及的关键知识点。 首先，我们要理解Angular...
h5学习笔记：layui table
夏天的树人的专栏
06-30 2982
最近在做Layui的后台，发现Layui这个方案也不错，能够快速地在后台直接部署。相比还要配置webpack，Layui jquery体系开箱即用在一些单独的情况下还是挺不错的。最近整理一下现在梳理一下Table组件的用法。 一 、Table 组件 Table组件可以采用官方提供的三种方式来获取数据。官方推荐js一种。这样定义一个table组件。定义一个id 和lay-filter &lt...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 416
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 316
解决页面放大，图片模糊的问题
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
最新发布
uu0216的博客
07-16 784
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
封装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、付费专栏及课程。

余额充值