elementui-table封装

一、介绍

背景:

基于 elementui admin pro 版本框架,组件库版本2.15.13

目的:

基于以上实现table组件的二次封装,使其使用更加方便,减少代码量,提高复用性

总的来说就是把table的表头改成动态数据渲染,调用的时候将表头数据和表格数据传给ExTable子组件渲染, 不用一行一行的写el-table-column,每列都可以自定义需要的参数还是很方便的,另外还可以加上分页,加上自定义组件 根据render修改列数据展示内容

二、步骤解析

官方代码大家可以去elementui官方组件库

  1. 创建ExTable.vue组件,创建数据文件formData.js文件。
  2. 在ExTable.vue中添加table组件改造代码
  3. ExTable.vue表格需要的表头数据

三、代码详情

ExTable.vue代码(不含样式):

<el-table
            :data="tableData"
            border
            stripe
            style="width: 98%;margin-top:10px;"
          >
            <el-table-column
              v-for="(item, index) in userData"
              :key="index"
              :type="item.type || ''"
              :prop=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值