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

万物论
2,965 阅读1分钟

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

avatar
文章
阅读
粉丝