iview 组件的 table二次封装

已于 2023-08-01 11:21:24 修改
阅读量403 收藏
点赞数 1
分类专栏： iview 文章标签： view design java 前端
于 2023-08-01 11:17:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42066070/article/details/132038045
版权
本文档介绍了如何使用iview组件库封装一个名为darkTable的组件，详细解析了组件的各个属性，如tableColumns（表格列名）、tableData（渲染数据）、tableHeight（表格高度）、paginateTotal（总页数）、isLoading（加载状态）、tablePageData（分页配置）以及selectChange（多选事件）。同时，还涵盖了封装的子组件和全局调用的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

      <dark-table
        ref="table"
        :tableColumns="tableColumns"
        @selectChange="changeSelect"
        :tableData="tableData"
        :tableHeight="585"
        :paginateTotal="paginateTotal"
        :isloading="isLoading"
        v-model="tablePageData"
      />
封装成darkTable组件

一、调用组件的属性代表的意思

1.tableColumns代表的是表格名称
    tableColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "客户名称",
          key: "custName",
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue iview table实现全选
qq_37635012的博客
04-08 680
【代码】vue iview table实现全选。
二次封装element 的Tooltip 文字提示
weixin_45354225的博客
05-19 705
啊实打实的 阿萨大大大 啊实打实的 a’s’da’s’daasdasda
iview表格二次封装，使其支持分页
qq_38669001的博客
08-15 1028
由于之前的项目使用的是Ant Design Pro Of Vue，里面提供的s-table用着很顺手，于是就按着同样是使用方式去封装一个ivew的s-table。(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。组件内部对数据选择做了处理，即使切换页码，也可以保留上一页选择的数据，并且回到上一页依旧是已选中状态。本一致，在其基础上，封装了加载数据的方法和获取已选择数据的方法。（前端分页，如果你拥有全部数据并且需要分页，则可以使用前端分页）...
基于iview对table进行二次封装处理
yw00yw的博客
12-22 1216
模板 <template> <div> <div class="table_box"> <Table :columns="tableColumns" :data="tableData" :height="tableHeight" v-if="tableColumns.length > 0"> <!-- 渲染数据 --> <te
iView Table 组件跨页选择功能实现文档
最新发布
WuKongHeBaJie的博客
04-28 976
实现基于 iView Table 组件的多选功能，支持以下特性：状态存储状态同步事件处理 脚本部分 核心逻辑说明 关键配置 配置项 说明 必须设置为数据唯一标识字段 用于获取表格实例操作选中状态 状态同步流程 #mermaid-svg-JsVxRMYkQy07BnOD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JsVxRMYkQy07B
iView表格二次封装
weixin_33717117的博客
06-13 1887
在使用iview的过程中，很多时候需要处理大部分的表格，且操作是一样的时候，那么就可以抽出来，做成共公的一部分。方便偷懒~ 如图: 为了实现表格自带操作栏，且可以自定义覆盖，我们开始二次封装 原理 1.使用$attrs $listeners 全部传递iview Table组件默认的所有属性和事件 2.在自定义的组件中，修改columns的值，来实现我们想要的效果 复制代码 实现 a.定义Tabl...
iview表格简单二次封装
qq_42783273的博客
11-15 912
iview表格简单二次封装 <template> <Table ref="current" v-bind="$attrs" :columns="columns" :data="dataSource"> <template v-for="item in columns" :slot="item.slot?item.slot:''" slot-scope="{ row, column , index }"> <slot :
vue-iview-table二次封装，render函数，slot的封装
浩星
09-19 5556
前言： 正好这个项目用到iview的table，之前有封装的element的table，这里把iview的也封装下，提高复用性和价值。 首先：我们的公共组件ctable.vue <template> <Table :width='width' :height='height' :stripe='stripe' :bo...
基于iview二次封装实用组件
04-14
二次封装iview组件通常包括以下几个步骤： 1. **需求分析**：首先明确项目中需要的特定功能，确定哪些iview组件需要被封装，以及需要添加哪些额外功能或样式。 2. **组件设计**：设计新的组件结构，考虑如何组合和...
iview 组件的封装
chenzhawu3547的博客
03-28 531
父组件 <sac-input v-model="filterForm.name" label="banner名称" ref="filterFormName" prop="banner" ></sac-input> 子组件 <template>...
iview，Table组件二次封装实现高度自适应统一
frewtyh的博客
02-03 770
在原有的table上获取到视图上方的距离，然后再判断table下方有多少dom盒子，再将table距上方高度，下方盒子高度，所需留白高度相加然后再加个事件监听，得到table的高度就实现了高度自适应。封装table时发现如果表头属性中有slot如何解决，开始只做了简单判断，判断了第一层slot，但当colums的children中有slot将无法识别。后台管理系统的界面留白高度总是不统一，界面中大部分都是table列表，于是需要二次封装cus-table.下面是代码。
vue+iview分页组件的封装
01-18
vue+iview的分页组件封装 1.在components中创建pagination文件夹，接着创建src，index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer { margin-right: 0; } } 3.index.js文件 import ./index.less; import component from ./src/main; /* istanbul ignore next */ compo
iView（table表格组件）
06-30
iView（table表格组件）
vxe-table表格二次封装
qq_45913170的博客
08-11 1920
if (title === "操作") {// 是否显示加载动画，默认false 不加载。// 其余的单元格使用默认行为。title="序号"// 重写默认的提示内容。default: "列表"//是否选择checkbox。// 将表格和工具栏进行关联。// 头部最左边的标题。//开启保留翻页选中。// 复选框勾选全部事件。// 复选框勾选事件。
TableView的封装
weixin_30699741的博客
03-17 174
1、基于NSObject封装TableView TableViewDelegateObj.h #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> typedef void (^selectCell) (NSIndexPath *indexPath); /** * 代理对象(UI...
iview的table
qq_43688916的博客
06-11 828
//基础代码 <i-table border :columns="columns" :data="data"></i-table> js里 export default { data () { return { self: this, columns: [ { title: '个人信息',
iView——Table表格
热门推荐
发子鸡的博客
06-18 2万+
iView——Table表格 24栅格系统，将区域进行24等分，总和一定是为24 属性 col必须放在row里面，span+offset总和为24，offset为左右偏移；另外注意flex填充、结合Bootstrap 实现响应式布局 <Row> <Col flex="2">2 / 5</Col> <Col flex="3">3 / 5</Col> </Row> gutter order（col）改变排列顺序
关于vxe-table的使用心得及扩展2【vxe-table表格二次封装】(非插件)
weixin_48463654的博客
07-22 1742
vxe-table 表格二次封装，补充合计配置，复选框逻辑兼容el-table
基于iView的列表组件封装
weixin_33709219的博客
05-16 414
封装的好处多多，代码便于维护、减少代码量、减少BUG 前台封装以前没有尝试过，这回试试，哈哈 目录 1、列表组件封装 2、树组件封装 3、下拉框组件封装 4、上传组件封装 列表组件的API 属性 说明 类型 默认值 url 请求列表数据的地址 必填 String 无 pagingOption 列表底部是否显示分页信息及总数，有两个...
深入探讨基于iView框架的二次封装组件实践
资源摘要信息:"iview二次封装实用组件的开发和应用，是一个典型的前端开发活动，涉及到iview这一基于Vue.js的前端UI框架。iview组件封装是指开发人员利用iview提供的基础组件，按照特定的业务逻辑进行封装，生成更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunyin.liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值