Dg-table is a table component based on ElementUI encapsulation and demo has been uploaded to Github

rendering

github 

npm install
npm run serve
Copy the code

The data retrieved in the event can be viewed in the browser console.

In the demo you may find that the data is not updated after the filter condition is changed. This is not a bug but I did not process the data.

Usage analysis

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')
Copy the code

Because the table component is developed based on ElementUI, make sure that ElementUI related components and styles are introduced. Then introduce the DG-table component and associated styles. This allows you to use the DG-table component globally.

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>
Copy the code

In the code :configs tableId@filter-change is a dG-table specific attribute and event (click here to see the description). The rest of the configuration is exactly the same as for el-Table. See the ElementUI Table documentation for details of the configuration.

Configs code analysis in demo

      configs: [
        {
          columnConfig: {
            type: 'index'}}, {columnConfig: {
            type:"expand"
          },
          component: Expand
        },
        {
          columnConfig: {
            type: 'selection'}}, {columnConfig: {
            prop: "name".label: "Name".sortable: true}}, {columnConfig: {
            prop: "gender".label: "Gender".filters: [{text: 'male'.value: '1'},
              {text: 'woman'.value: '2'}].filterMethod: (value, row, column) = > {
              const property = column['property'];
              returnrow[property] === value; }},component: Gender,
        },
        {
          columnConfig: {
            prop: "birthPlace".label: "Birthplace"
          },
          component: Address,
          filterConfig: {
            type: 'cascader'.component: MyCascader
          }
        },
        {
          columnConfig: {
            prop: "birthDay".label: "Date of birth"
          },
          filterConfig: {
            type: 'date'.component: MyDatePicker
          }
        },
        {
          columnConfig: {
            prop: "phone".label: "Mobile phone Number"
          },
          filterConfig: {
            type: 'custom'.component: MyInput
          }
        },
        {
          columnConfig: {
            prop: "age".label: "Age"}}, {columnConfig: {
            prop: "createAt".label: "Creation time"
          },
          filterConfig: {
            type: 'date'}}, {columnConfig: {
            label: 'operation'.fixed: 'right'
          },
          component: Buttons
        }
      ]
Copy the code

This is an array, and the number of columns in the array represents the number of columns in your table, and each number represents the configuration of your column.

  • ColumnConfig: Indicates the corresponding value<el-table-column></el-table-column>Component configuration for detailsTable-column Attributes in ElementUI tableI’ll do it over here in typical demo configurationcolumnConfiginto<el-table-column></el-table-column>
columnConfig: {
    type: 'index'
}
// equivalent to the following code
<el-table-column type="index">
Copy the code
columnConfig: {
    prop: "name".label: "Name".sortable: true
}
// equivalent to the following code
<el-table-column
    prop="name"
    label="Name"
    sortable>
Copy the code
columnConfig: {
    prop: "gender".label: "Gender".filters: [{text: 'male'.value: '1'},
      {text: 'woman'.value: '2'}].filterMethod: (value, row, column) = > {
       const property = column['property'];
       returnrow[property] === value; }}// equivalent to the following code
<el-table-column
  prop="gender"
  label="Gender"
  :filters="[{value: text: 'male', '1'}, {value: text: 'female' and '2'}]"
  :filter-method="filterHandler">
Copy the code

The same applies to other attributes

  • Component: For custom columns that can be passed in custom componentspropsWe get it,rowandcolumnIn the demoGender.vueAnalysis of the
<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>
Copy the code
export default {
  props: ['row'.'column'],
  data() {
    return {
      gender: Object.freeze({
        1: 'male'.2: 'woman'})}}}Copy the code

Get the row and determine the gender of the current column to convert it to male or female. Just focus on how the column is represented when writing a custom column.

  • This is the filterConfigdg-tableThe difference withel-tableCustom filter configuration. Two types of filters are provided by default:dateThe date ofcascaderCascading default selector styles and things like that are writable, so if you want to configure these two selectors separately we’ll talk about how to do that later. This is one of the custom filters, but it’s a little different. There is another filter in addition to the default one providedcustomCustom filters.

Let’s start by analyzing the use of the default date filter

filterConfig: {
   type: 'date'
}
Copy the code

Doesn’t that look easy

The default Cascader cascade filter

filterConfig: {
   type: 'cascader'.props: {
      data: cities(), // This is my internally defined function to get the province
      myprops: {
        value: 'code'.label: 'name'.children: 'children'}}}Copy the code

Where data corresponds to the options attribute of el-Cascader, myprops corresponds to the props attribute

Customize the two filters next

Custom date picker:

filterConfig: {
   type: 'date'.component: MyDatePicker
}
Copy the code

This is also a custom filter, but in a special case, type must be date, and Component is our custom filter

<template>
  <div>
    <dg-date-picker
      :config="config"
      type="daterange"
      align="left"
      format="Yyyy year MM month DD day"
      value-format="yyyy-MM-dd"
    >
    </dg-date-picker>
  </div>
</template>
Copy the code
export default {
  props: ['config']}Copy the code

If you want to customize the date picker, you can see that instead of using the el-date-picker, you can use a wrapped date picker that is exactly the same as the el-date-picker except to pass a config received by the props. Note that the change event is already implemented in dG-date-picker. It doesn’t make much sense for the user to listen for the change event, but it can also be listened, which will be merged into a function. How about introducing the Dg-date-picker component, which is defined globally in main.js in demo

/ /...
import {
  DgDatePicker } from 'dg-table/lib/packages'
/ /...
Vue.component(DgDatePicker.name, DgDatePicker)
Copy the code

So you can use it all over the place, even if you want to introduce it locally.

Custom cascade selector:

filterConfig: {
   type: 'cascader'.component: MyCascader
}
Copy the code

Type must be cascader,

<template>
  <div>
    <dg-cascader
    :options='options'
    :config='config'
    :props='myprops'
    ></dg-cascader>
  </div>
</template>
Copy the code
import {
  cities
} from '.. /assets/js/simulationapi.js'
export default {
  props: ['config'],
  data() {
    return {
      options: cities(),
      myprops: {
        value: 'code'.label: 'name'.children: 'children'.expandTrigger: 'hover'}}}}Copy the code

Dg-date-cascader is result-wrapped like the date picker, and the instructions are the same as el-Cascader except for passing a config. The introduction of dg – cascader

/ /...
import {
  DgCascader } from 'dg-table/lib/packages'
/ /...
Vue.component(DgCascader.name, DgCascader)
Copy the code


So much for the analysis of the code in the demo. It’s still relatively simple to use.