vue.js中怎么封装table组件

这篇文章将为大家详细讲解有关vue.js中怎么封装table组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

为什么封装

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

封装的内容都有哪些

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

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

封装table组件

确认数据格式

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

<el-table :data="tableData" >   <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    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    background  layout="prev, pager, next"  :page-size="pageLimit"  :total="total"  :current-page="currentPage"  @current-change="handleCurrentChange"/>handleCurrentChange(val) {   this.$emit('currentChange', val)}

关于vue.js中怎么封装table组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。