Encapsulate the table component of element UI, and flexibly configure the header to realize the functions of table editing, button, link, etc.

1. Define table height full screen
2. Add foreground paging function.
3. Customize the header and output the overall table structure in a circular way.
4. In table editing (input box and drop-down selection box).
5. Custom buttons and click events in the form.
6. Add filter function for each column.
7. Formable number
8. You can check the checkbox in multiple pages, save or delete it at the same time, and keep the checkbox selected after switching pages.
9. Automatically select the row after editing in the table.
10. The parent component prints the checked lines.
11. Custom sorting function, sorting by number size

1. npm install,

1. npm run dev

[ { "bh": 1, "xmid": "5463562", "xmmc": "Test name", "Nsrsbh": "325423523542352345", "dwmc": "Name of testing unit", "yskze": "89787.66", "srze": "345345.35", "kcze": "56566.56", "zze": "345345", "zsfs_mc": "Calculation method 1", "xmxs": "Projects under construction" }, { "bh": 1, "xmid": "5463562", "xmmc": "Test name", "Nsrsbh": "325423523542352345", "dwmc": "Name of testing unit", "yskze": "0.00", "srze": "345345.35", "kcze": "56566.56", "zze": "345345", "zsfs_mc": "Calculation method 1", "xmxs": "Projects under construction" } ]

2. Format of columns header array:

[ , , , }, , , , ,],style:'text-align:right;'}, , ,]}, ]

3. Column header parameter description

name: 'Header name'， desc: 'Field name'， width: 'Cell width', click: 'Is the cell clickable'，Trigger component binding function btnClickFunc，parameter url: 'Click to jump url' sortable: 'Sortable or not'， format: 'Format amount'， fixed: 'Fixed column'， edit: 'Editable or not'， editType: 'Editing type',['inpput','select'] editSelOptions: 'When the editing type is select Initial data at'. style: 'Cell data style' btns: 'Button in cell, multiple'. Trigger component binding function handleBtnClick，Parameters: name: Button name, btnType:Button style, clickType:Button event ID. templet: 'The judgment function of whether a cell can be clicked can be used for complex function judgment'. Parameter: data of this line row.

3 December 2019, 22:36 | Views: 8558