vue.js中怎么封裝table組件

這篇文章將為大家詳細(xì)講解有關(guān)vue.js中怎么封裝table組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

為什么封裝

首先為什么封裝，是因?yàn)樽非蠹夹g(shù)嗎，不，是因?yàn)閼?，不想一直的去粘貼，所以就想把table封裝下，可以在創(chuàng)建新的table的時(shí)候，只需要填充數(shù)據(jù)就行了。

封裝的內(nèi)容都有哪些

主要有兩個(gè)，一個(gè)是table組件，一個(gè)是分頁(yè)組件

搞清楚這個(gè)些，就可以開(kāi)始封裝組件了。

封裝table組件

確認(rèn)數(shù)據(jù)格式

先確定數(shù)據(jù)格式,這個(gè)我們需要看下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>

現(xiàn)在我們考慮數(shù)據(jù)類型，例如lebel， prop, widht 按鈕類型， 事件等等，

let paramsType = {
  data: Array, // 數(shù)據(jù)
  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
        }
      ]
    }
  ] 
}

定義號(hào)數(shù)據(jù)文檔后，我們就可以開(kāi)始封裝組件了

封裝組件

封裝全局組件

之所以封裝全局組件是為了省事，所有的目的，全都是為了偷懶。

src下創(chuàng)建components文件，里邊寫我們的組件，每個(gè)組件建議單獨(dú)文件夾，便于我們維護(hù)。

創(chuàng)建自己的table.vue組件，名字我的叫FrTable,內(nèi)容暫時(shí)先不說(shuō)，先說(shuō)引用。

全局使用

導(dǎo)入FrTable文件到components下的index.js文件中，在這里遍歷所有的組件，并導(dǎo)出

代碼如下：

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
}

然后導(dǎo)出到main.js中，通過(guò)Vue.use()來(lái)使用組件，如下

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

頁(yè)面中的使用

<fr-table />

table組件封裝

考慮的問(wèn)題

table中有多少種情況，

• 正常的數(shù)據(jù)類型展示

• 獨(dú)有的展示方式

• 有操作按鈕

第一種的類型那我們其實(shí)是不需要操作太多，只需要通過(guò)for循環(huán)渲染就可以了。

第二種其實(shí)也還好，我們可以通過(guò)slot做定制化處理

第三種，按鈕的操作。按鈕其實(shí)可以分多種類型

按鈕的類型

1. 按鈕的正常使用，點(diǎn)擊功能

2. 按鈕起跳轉(zhuǎn)作用

3. 按鈕起打開(kāi)新頁(yè)面的作用

4. 按鈕起自定義事件的作用

代碼的編寫

通過(guò)上邊，我們已經(jīng)分析了table的所有問(wèn)題，現(xiàn)在只需要敲代碼就可以了。

第一種情況

<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方法

這個(gè)方法來(lái)處理數(shù)據(jù)，

數(shù)據(jù)類型分為正常數(shù)據(jù)類型，需要轉(zhuǎn)化的數(shù)據(jù)類型，模板轉(zhuǎn)化的數(shù)據(jù)類型,

代碼如下

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
},

第一種情況比較簡(jiǎn)單，只是簡(jiǎn)單的數(shù)據(jù)渲染，和定制化的表頭渲染，上邊總體的是多選功能+正常的表單

第二種情況

自定義的列表

<template slot-scope="scope">
   <!-- 自定義內(nèi)容 -->
   <slot
      v-if="item.isSlot"
      :name="item.prop"
      :row="scope.row"/
   >
</template>

自定義的類別，我們只需要isSlot設(shè)置為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>

按鈕其實(shí)還是循環(huán)渲染的，主要是事件的分析，通過(guò)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傳參的值

當(dāng)前的參數(shù)，和我們定義的參數(shù)是一致的，因此代碼如下

  // 數(shù)據(jù)
    data: {
      type: Array,
      required: true
    },
    // 表頭參數(shù)
    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>

大致如下，如果需要使用多選的時(shí)候，自行定義方法，排序也一樣。

分頁(yè)組件封裝

參考element分頁(yè)組件

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

數(shù)據(jù)定義

定義如下：

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)
}

關(guān)于vue.js中怎么封裝table組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。