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:pipe Use 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:id2name Use 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…