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

 更新时间:2021年08月05日 12:37:55   作者:面屏思过  
table作为数据展示组件,在日常开发中经常被用到,这篇文章主要给大家介绍了关于vue.js管理后台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封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于vue属性使用和不使用冒号的区别说明

    关于vue属性使用和不使用冒号的区别说明

    这篇文章主要介绍了关于vue属性使用和不使用冒号的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 渲染函数 & JSX详情

    渲染函数 & JSX详情

    本篇文章来讲解渲染函数 & JSX,Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时我们可以用渲染函数,它比模板更接近编译器,需要的朋友可以参考一下
    2021-09-09
  • vue项目中极验验证的使用代码示例

    vue项目中极验验证的使用代码示例

    这篇文章主要介绍了vue项目中极验验证的使用代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    这篇文章主要介绍了如何在 Vue 中集成 Mozilla/PDF.js ,实现自定义的 PDF 预览器,以及给被预览的 PDF 添加水印
    2021-01-01
  • 基于Vue2的独立构建与运行时构建的差别(详解)

    基于Vue2的独立构建与运行时构建的差别(详解)

    下面小编就为大家分享一篇基于Vue2的独立构建与运行时构建的差别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Vue.js tab实现选项卡切换

    Vue.js tab实现选项卡切换

    这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    这篇文章主要介绍了浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VUE Elemen-ui之穿梭框使用方法详解

    VUE Elemen-ui之穿梭框使用方法详解

    这篇文章主要为大家详细介绍了VUE Elemen-ui之穿梭框使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue2.0 下拉框默认标题设置方法

    vue2.0 下拉框默认标题设置方法

    今天小编就为大家分享一篇vue2.0 下拉框默认标题设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue Element前端应用开发之菜单资源管理

    Vue Element前端应用开发之菜单资源管理

    在权限管理系统中,菜单也属于权限控制的一个资源,属于角色控制的一环。不同角色用户,登录系统后,出现的系统菜单是不同的。菜单结合路由集合,实现可访问路由的过滤,也就实现了对应角色菜单的展示和可访问路由的控制。
    2021-05-05

最新评论