A table is a display of similar structured data, including sorting, filtering, comparing, or other custom operations

In the background management system is used very frequently, for different data the same way of display, how should we reduce their workload? This is particularly important

chooseelement uiAs our foundation
npm i element-ui -S
Copy the code

Element UI provides an

component and exposes Attributes, Events, Methods, and slots to configure.

That as the user (el-table), and the provider (The parent component) What do we need to do ourselves?

Attributes
parameter instructions type The default value
className Custom class name String “”
columns Table field Configuration Array () = > []
data The list of data Array () = > []
tabIndex Whether to display serial number Boolean false
checkBox Is there a selection box Boolean false
radioCheck Whether to select Radio Boolean false
handle Action Bar Configuration Object (a) = > ({})
pager Whether the paging Boolean false
formatData Formatting data Object (v) => v
rowKey Row data Key, used to optimize Table rendering String “”
draggable Whether drag and drop is supported Boolean false
limitMaxHeight Limit form height Boolean false
pagination Paging parameters Object (a) = > ({})
loading Loading status Boolean false
Event
The event name instructions parameter
handleClick Send events in the operation column. Event is the customized operation key of the Handle, row represents this row, and $index is the subscript event,row,$index
changeCur The current page has changed current
column
label Header title
value Display content
color Displayed in the form of SUCCESS, Warning, Danger, and Theme
minWidth Minimum width
width Fixed width
type Popover – popover- popover- image- Popover – icon – tag- id2name- ID to name; time- convert the current timestamp to date. Boolean – Change Boolean to yes, pipe- Whether the current content requires a filter
pipe Filter name, andtype:pipeUse a combination of
pipeArg Filter parameter
fixed The current column is the fixed layout
align Left, center, right, default is Center
id2name_code Dictionary names can be returned back – end or configured front – end withtype:id2nameUse a combination of
handle
label operation
width Operation column fixed width
fixed Operation column fixed layout
btns An array of defined operation items
btn
label Copy operation
type <el-button>The Type attribute in
disabled <el-button>The Disabled property in
event Action events, unique values, are captured by handleClick events
ifRender This function returns true, false to determine whether the BTN is displayed. The argument is the current BTN
slot Slot or not, you can customize styles by scoping slots
Now let’s build a simple table to see what needs to be done

config.js

export default {
  columns: [{label: 'the writer'.value: 'username'.color: 'danger'
    },
    {
      label: 'classification'.value: 'categoryname'}, {label: 'title'.value: 'title'.minWidth: 200}, {label: 'Keyword'.value: 'keyword'}, {label: 'Article Status'.value: 'article_status'.type: 'id2name'.id2name_code: 'ArticleStatus'}, {label: 'Last modified time'.type: 'time'.value: 'last_modify_date'.width: 180}, {label: 'Time of publication'.type: 'time'.value: 'publish_date'.width: 180],},handle: {
    label: 'operation'.width: '150'.fixed: "right".btns: [{
      label: 'edit'.type: 'text'.event: 'edit'.show: true
    }, {
      label: 'delete'.type: 'text'.event: 'remove'.show: true
    }]
  },
  formatData (res) {
    return res.map(item= > {
      item.username = item.user_id[0].username
      item.categoryname = item.category_id[0].name
      return item
    })
  }
}
Copy the code
<dy-table
  :columns="config.columns"
  :data="data"
  :handle="config.handle"
  :formatData="config.formatData"
  :pagination="pagination"
  :tabIndex="true"
  :pager="true"
  :loading="loading"
  :draggable="true"
  :checkBox="true"
  @handleClick="onHandleClick"
  @changeCur="onPageChanged"
  @select="onCheckout"
></dy-table>
Copy the code

Data is the data we request from the back end, and other personalization requirements can be configured through properties.

And let’s see what happens

conclusion

Thus, configuration allows us to write less repetitive code, and to think more clearly, and to reduce maintenance costs when encountering new requirements.

Code: github.com/wumaimai/co…