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

时间 2019-11-06

标签 elementui table 简单组件使用最新版繁體版

原文原文链接

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

效果图

能够从 github上面拉下来经过npm命令就能预览效果

npm install
npm run serve
复制代码

在事件获取的数据能够在浏览器的控制台中查看。html

在demo中你可能会发现筛选条件改变后数据没有更新，这并非bug而是我没有处理这些数据。vue

用法分析

main.jsgit

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组件了。github

App.vuenpm

<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的文档。element-ui

configs在demo中的代码分析api

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中代码的分析就到这里来。使用起来仍是比较简单。