vue.js管理后台table组件封装的方法

目录
  • 问题分析
    • 为什么封装
    • 封装的内容都有哪些
  • 封装table组件
    • 确认数据格式
    • 封装组件
      • 封装全局组件
      • table组件封装
  • 分页组件封装
    • 数据定义
    • 封装
  • 总结

最近开了新的项目,简单说了自己的table封装。

问题分析

为什么封装

首先为什么封装,是因为追求技术吗,不,是因为懒,不想一直的去粘贴复制代码,所以就想把table封装下,可以在创建新的table的时候,只需要填充数据就行了。

封装的内容都有哪些

主要有两个,一个是table组件,一个是分页组件

搞清楚这个些,就可以开始封装组件了。

封装table组件

确认数据格式

先确定数据格式,这个我们需要看下el-table组件

<el-table :data="tableData" style="width: 100%">
   <el-table-column prop="date" label="日期" width="180" />
   <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
     </template>
   </el-table-column>
</el-table>

现在我们考虑数据类型,例如lebel, prop, widht 按钮类型, 事件等等,

let paramsType = {
  data: Array, // 数据
  loading: Boolean,
  selectionShow: Boolean,
  columns:Array = [
    {
      label: String,
      prop: String,
      filter: Function,
      isSlot: Boolean,
      width: Number,
      tempalte: Function,
      btns: Array = [
        { name: String,
          btnType: String,
          clickType: String,
          routerType: String,
          url: String,
          query: Function,
          btnClick: Function
        }
      ]
    }
  ]
}

定义号数据文档后,我们就可以开始封装组件了

封装组件

封装全局组件

之所以封装全局组件是为了省事,所有的目的,全都是为了偷懒。

src下创建components文件,里边写我们的组件,每个组件建议单独文件夹,便于我们维护。

创建自己的table.vue组件,名字我的叫FrTable,内容暂时先不说,先说引用。

全局使用

导入FrTable文件到components下的index.js文件中,在这里遍历所有的组件,并导出

代码如下:

import TrTable from './FrTable/index'

const components = [TrTable]

const install = (Vue) => {
  components.map(component => {
    Vue.component(component.name, component)
  })
}

if (typeof Window !== 'undefined' && window.Vue) {
  install(Window.Vue)
}

export default {
  install
}

然后导出到main.js中,通过Vue.use()来使用组件,如下

import globalComponents from '@/components/index'
Vue.use(globalComponents)

页面中的使用

<fr-table />

table组件封装

考虑的问题

table中有多少种情况,

  • 正常的数据类型展示
  • 独有的展示方式
  • 有操作按钮

第一种的类型那我们其实是不需要操作太多,只需要通过for循环渲染就可以了。

第二种其实也还好,我们可以通过slot做定制化处理

第三种,按钮的操作。按钮其实可以分多种类型

按钮的类型

  1. 按钮的正常使用,点击功能
  2. 按钮起跳转作用
  3. 按钮起打开新页面的作用
  4. 按钮起自定义事件的作用

代码的编写

通过上边,我们已经分析了table的所有问题,现在只需要敲代码就可以了。

第一种情况

<el-table :data="data" border :loading="loading">
        <!-- 勾选 -->
   <el-table-column v-if="selectionShow" type="selection" width="50" align="center" :reserve-selection="true" />
     <template v-for="(item, index) in columns">
        <el-table-column :key="index" v-bind="item">
            <!-- 自定义表头 -->
          <template v-if="item.customHeader" slot="header">
              <slot :name="item.headerProp" />
          </template>
          <template slot-scope="scope">
               <span v-html="handleFilter(item, scope.row, item.prop)" />
          </template>
        </el-table-column>
     </template>
 </el-table>

这里我们可以看到handleFilter方法

这个方法来处理数据,

数据类型分为正常数据类型,需要转化的数据类型,模板转化的数据类型,

代码如下

handleFilter(item, val, prop) {
  let value = val[prop]
  if (item.templet) value = item.templet(val)
  return item.filter ? this.$options.filters[item.filter](val[prop]) : value
},

第一种情况比较简单,只是简单的数据渲染,和定制化的表头渲染,上边总体的是多选功能+正常的表单

第二种情况

自定义的列表

<template slot-scope="scope">
   <!-- 自定义内容 -->
   <slot
      v-if="item.isSlot"
      :name="item.prop"
      :row="scope.row"/
   >
</template>

自定义的类别,我们只需要isSlot设置为true,name为prop,row为data

第三种

第三种按钮分四种情况

<template v-if="item.btns">
   <el-button
     v-for="(btn, i) in item.btns"
     :key="i"
    class="mr_10"
    :size="btn.mini ? btn.mini: 'small'"
    :type="btn.type ? btn.type: 'primary'"
    @click="btnClickfunc(btn, scope.row)"
  >
     {{ btn.name }}
  </el-button>
</template>

按钮其实还是循环渲染的,主要是事件的分析,通过btnClickfunc事件操作。

btnClickfunc(column, row) {
      const path = {
        [column.routerType]: column.url,
        query: column.query ? column.query(row) : ''
      }
      if (column.clickType === 'router') {
        this.$router.push(path)
      } else if (column.clickType === 'router_blank') {
        const routeData = this.$router.resolve(path)
        window.open(routeData.href, '_blank')
      } else if (column.clickType === 'btnClick') {
        column.btnClick(row)
      } else {
        this.$emit('btnClickFunc', { column: column, row: row })
      }
},

分不同的类型,我们做不同的处理。

props传参的值

当前的参数,和我们定义的参数是一致的,因此代码如下

  // 数据
    data: {
      type: Array,
      required: true
    },
    // 表头参数
    columns: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 多选框选择
    selectionShow: {
      type: Boolean,
      default: false
    },

自此,只剩下了组件的使用方式了

组件的使用

<fr-table
      ref="mt"
      :loading="loading"
      :data="list"
      :columns="columns"
    >
</fr-table>

大致如下,如果需要使用多选的时候,自行定义方法,排序也一样。

分页组件封装

参考element分页组件

<el-pagination
  style="margin-top:40px;"
  background
  layout="prev, pager, next"
  :page-size="pageLimit"
   :total="total"
   :current-page="currentPage"
   @current-change="handleCurrentChange"
/>
handleCurrentChange(val) {
   console.log(val)
}

数据定义

定义如下:

total: Number,
pageLimit: Number,
currentPage: Number,

封装

<el-pagination
  style="margin-top:40px;"
  background
  layout="prev, pager, next"
  :page-size="pageLimit"
  :total="total"
  :current-page="currentPage"
  @current-change="handleCurrentChange"
/>

handleCurrentChange(val) {
   this.$emit('currentChange', val)
}

看上去是不是很简单,其实就是这么简单。

然后我们在组件上把分页事件和参数加上,我们整个table的组件封装就完成了,至此,我们完成了整个table组件封装的全部工作。

总结

到此这篇关于vue.js管理后台table组件封装的文章就介绍到这了,更多相关vue后台table封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • 如何封装Vue Element的table表格组件

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta

  • 封装Vue Element的table表格组件的示例详解

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • 基于Vue+element-ui 的Table二次封装的实现

    本人第一次写这个 写的不好还望指出来 作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ! 公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了 效果图 表格组件的引入与使用 <com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange&q

  • vue.js管理后台table组件封装的方法

    目录 问题分析 为什么封装 封装的内容都有哪些 封装table组件 确认数据格式 封装组件 封装全局组件 table组件封装 分页组件封装 数据定义 封装 总结 最近开了新的项目,简单说了自己的table封装. 问题分析 为什么封装 首先为什么封装,是因为追求技术吗,不,是因为懒,不想一直的去粘贴复制代码,所以就想把table封装下,可以在创建新的table的时候,只需要填充数据就行了. 封装的内容都有哪些 主要有两个,一个是table组件,一个是分页组件 搞清楚这个些,就可以开始封装组件了.

  • vue左右滑动选择日期组件封装的方法

    现在做的项目中遇到了左右滑动选择日期的一个功能,然后我封装了一下这个组件,现在分享给大家看一下: 效果图: 1.安装dayjs日期文件 npm install dayjs --save 2.封装的组件: <template>   <div class="m-calendar" ref="calendar">     <div class="m-toolbar">       <div class=&quo

  • Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

  • vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

  • Vue.js 2.x之组件的定义和注册图文详解

    前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注

  • vue项目中进行svg组件封装及配置方法步骤

    最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用vue cli4进行配置的) 2.创建一个自定义组件 具体代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=

  • vue.js 父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue.js购物车添加商品组件的方法

    现实向购物车添加商品组件 代码 <template> <div class="cartcontrol"> <!--商品减一区域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品数

随机推荐