帶你擼ElementUI + dg-table 簡單的dg-table組件使用（最新版）

dg-table是一個基於ElementUI封裝的表格組件 demo也已經上傳在Github上了

效果圖

能夠從 github上面拉下來 經過npm命令就能預覽效果

npm install
npm run serve
複製代碼

在事件獲取的數據能夠在瀏覽器的控制檯中查看。

在demo中你可能會發現篩選條件改變後數據沒有更新，這並非bug而是我沒有處理這些數據。

用法分析

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import DGTable from 'dg-table'

import 'element-ui/lib/theme-chalk/index.css'
import 'dg-table/lib/css/index.css'

Vue.use(ElementUI)
Vue.use(DGTable)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
複製代碼

由於這個表格組件是基於ElementUI開發的，因此要確保ElementUI的相關組件和樣式被引進來。 而後引入dg-table組件和相關的樣式。 這樣你就能在全局使用dg-table組件了。

App.vue

<dg-table :configs="configs" tableId='account' @filter-change="filterChange" :data="tableData" height="600" @row-click='rowClick' @selection-change="handleSelectionChange" stripe show-summary highlight-current-row :default-sort = "{prop: 'date', order: 'descending'}" ></dg-table>
複製代碼

在代碼中:configs tableId @filter-change是dg-table特有的屬性和事件(點擊這裏查看說明)，而其他的配置跟el-table如出一轍，沒錯你能夠像使用el-table同樣使用dg-table，具體的配置能夠查看ElementUI table的文檔。

configs在demo中的代碼分析

configs: [
        {
          columnConfig: {
            type: 'index'
          }
        },
        {
          columnConfig: {
            type:"expand"
          },
          component: Expand
        },
        {
          columnConfig: {
            type: 'selection'
          }
        },
        {
          columnConfig: {
            prop: "name",
            label: "姓名",
            sortable: true
          }
        },
        {
          columnConfig: {
            prop: "gender",
            label: "性別",
            filters: [
              {text: '男', value: '1'},
              {text: '女', value: '2'}
            ],
            filterMethod: (value, row, column) => {
              const property = column['property'];
              return row[property] === value;
            }
          },
          component: Gender,
        },
        {
          columnConfig: {
            prop: "birthPlace",
            label: "出生地"
          },
          component: Address,
          filterConfig: {
            type: 'cascader',
            component: MyCascader
          }
        },
        {
          columnConfig: {
            prop: "birthDay",
            label: "出生日期"
          },
          filterConfig: {
            type: 'date',
            component: MyDatePicker
          }
        },
        {
          columnConfig: {
            prop: "phone",
            label: "手機號"
          },
          filterConfig: {
            type: 'custom',
            component: MyInput
          }
        },
        {
          columnConfig: {
            prop: "age",
            label: "年齡"
          }
        },
        {
          columnConfig: {
            prop: "createAt",
            label: "建立時間"
          },
          filterConfig: {
            type: 'date'
          }
        },
        {
          columnConfig: {
            label: '操做',
            fixed: 'right'
          },
          component: Buttons
        }
      ]
複製代碼

這是一個數組，數組中有幾個數據就表明你表格有幾個列，而每一個數據就表明了你這個列的配置。

• columnConfig： 對應的是<el-table-column></el-table-column>組件的配置，具體查看ElementUI table中的Table-column Attributes，就demo中的典型配置我在這邊把columnConfig轉成<el-table-column></el-table-column>

columnConfig: {
    type: 'index'
}
// 等同與下面的代碼
<el-table-column type="index">
複製代碼

columnConfig: {
    prop: "name",
    label: "姓名",
    sortable: true
}
// 等同與下面的代碼
<el-table-column
    prop="name"
    label="姓名"
    sortable>
複製代碼

columnConfig: {
    prop: "gender",
    label: "性別",
    filters: [
      {text: '男', value: '1'},
      {text: '女', value: '2'}
   ],
    filterMethod: (value, row, column) => {
       const property = column['property'];
       return row[property] === value;
   }
}
// 等同與下面的代碼
<el-table-column
  prop="gender"
  label="性別"
  :filters="[{text: '男', value: '1'}, {text: '女', value: '2'}]"
  :filter-method="filterHandler">
複製代碼

其餘的屬性以此類推，一樣適用

• component: 用於自定義列，在自定義組件中能夠經過props拿到，row和column 對demo 中的Gender.vue分析

<template>
  <div>
    <span v-if="row.gender === '1'" class="male">
      {{gender[row['gender']]}}
    </span>
    <span v-if="row.gender === '2'" class="female">
      {{gender[row['gender']]}}
    </span>
  </div>
</template>
複製代碼

export default {
  props:['row', 'column'],
  data() {
    return {
      gender: Object.freeze({
        1: '男',
        2: '女'
      })
    }
  }
}
複製代碼

經過拿到row判斷當前列的gender值來轉成男或女 編寫自定義列時只要把重點放在怎麼表現列上面便可。

• filterConfig 這是dg-table區別與el-table的地方了，自定義篩選器的配置。 默認提供兩種類型的篩選器： date日期 cascader級聯 默認的選擇器樣式之類的是寫死的，若是要單獨配置這兩種選擇器等下會介紹如何配置。也是屬於自定義篩選器的一種，可是又有點區別。 除了提供的默認的篩選器外還有一種custom自定義篩選器。

先來分析 默認的 date篩選器的使用

filterConfig: {
   type: 'date'
}
複製代碼

看起來是否是很簡單呢

默認的cascader 級聯篩選器

filterConfig: {
   type: 'cascader',
    props: {
      data: cities(), // 這是我內部本身定義的獲取省份的函數
      myprops: {
        value: 'code',
        label: 'name',
        children: 'children'
      }
    }
}
複製代碼

這裏面data對應的是 el-cascader的options屬性，myprops對應的是props屬性

接下來介紹自定義這兩種篩選器

自定義日期選擇器:

filterConfig: {
   type: 'date',
   component: MyDatePicker
}
複製代碼

雖然這也是自定義篩選器，可是比較特殊，type必須爲date， component就是咱們自定義的篩選器

<template>
  <div>
    <dg-date-picker :config="config" type="daterange" align="left" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" >
    </dg-date-picker>
  </div>
</template>
複製代碼

export default {
  props:['config']
}
複製代碼

這裏能夠看到自定義日期選擇器的時候 不是用el-date-picker而是用我這邊包裝過的日期選擇器，在用法上除了要傳一個props接收到的config以外其餘和el-date-picker如出一轍。要注意的是 其中change事件已經在dg-date-picker中實現了，用戶監聽change事件沒什麼太大意義，可是也能夠監聽，會合併成一個函數處理。 怎麼引入dg-date-picker組件呢，在demo中main.js中定義了全局使用

// .....
import {
  DgDatePicker } from 'dg-table/lib/packages'
// .....
Vue.component(DgDatePicker.name, DgDatePicker)
複製代碼

這樣你就能在各個地方使用了，若是要局部引入也是能夠。

自定義級聯選擇器：

filterConfig: {
   type: 'cascader',
   component: MyCascader
}
複製代碼

type必須爲cascader，

<template>
  <div>
    <dg-cascader :options='options' :config='config' :props='myprops' ></dg-cascader>
  </div>
</template>
複製代碼

import {
  cities
} from '../assets/js/simulationapi.js'
export default {
  props: ['config'],
  data() {
    return {
      options: cities(),
      myprops: {
        value: 'code',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover'
      }
    }
  }
}
複製代碼

跟日期選擇器同樣也是結果封裝的，用法說明跟dg-date-cascader同樣，除了要傳一個config外其他跟el-cascader同樣。 引入dg-cascader

// .....
import {
  DgCascader } from 'dg-table/lib/packages'
// .....
Vue.component(DgCascader.name, DgCascader)
複製代碼

還有```type```爲```custom```的篩選器 ```js filterConfig: { type: 'custom', component: MyInput } ``` ```MyInput.vue``` ```html ``` ```js export default { props: ['config'], data() { return { val: '' } }, methods: { confirm () { this.$emit('__CUSTOM_FILTER_DATA__', { value: this.val }) } } } ``` 代碼中在確認要篩選的處理函數上要經過 ```js this.$emit('__CUSTOM_FILTER_DATA__', { value: this.val }) ``` 來通知表格組件 你篩選來 某個條件，其中```value```就是在表格組件的```filter-change```事件中的回調函數接收參數```res```中的```value```，若是須要的話能夠定義```label```若是沒定義就拿不到值。

demo中代碼的分析就到這裏來。使用起來仍是比較簡單。