带你撸ElementUI + dg-table 简单的dg-table组件使用（重构版）

dg-table是一个基于ElementUI封装的表格组件
 demo也已经上传在Github上了

效果图

dg-table-demo.gif

可以从 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="ds"
    ></dg-table>

在代码中:configs tableId dg-table特有的属性(点击这里查看说明)

@filter-change是跟el-table公用的，在筛选的时候要做判断是来自 el-table的筛选还是来自dg-table可以通过返回的参数res.type判断有则来自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的筛选器

filterConfig: {
   type: 'custom',
   component: MyInput
}

MyInput.vue

<template>
  <div style="padding: 10px;width:200px">
    <el-input placeholder="请输入内容" v-model="val" class="input-with-select">
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="confirm">
      </el-button>
    </el-input>
  </div>
</template>

export default {
  props: ['config'],
  data() {
    return {
      val: ''
    }
  },
  methods: {
    confirm () {
      this.$emit('__CUSTOM_FILTER_DATA__', {
        value: this.val
      })
    }
  }
}

代码中在确认要筛选的处理函数上要通过

this.$emit('__CUSTOM_FILTER_DATA__', {
    value: this.val
})

来通知表格组件你筛选来某个条件，其中value就是在表格组件的filter-change事件中的回调函数接收参数res中的value，如果需要的话可以定义label如果没定义就拿不到值。

demo中代码的分析就到这里来。使用起来还是比较简单。

带你撸ElementUI + dg-table 简单的dg-table组件使用（重构版）

效果图

用法分析

推荐阅读更多精彩内容