preface

Vue-element-admin as a back-end front-end solution, its rich plug-ins, elegant solution needless to say. However, in the development of enterprise-level background products, we most often meet the demand is the list page, details page. Vue-element-admin’s solution is to use element-UI’s EL-table/EL-Form directly to implement the requirements. Since the list page and detail page have many similar or even the same requirements, UNDER this premise, I considered whether IT is possible to create a more efficient middle background solution based on vue-element-admin, so I came up with vue-SRM-admin. Project source, case show, source will know at the end of the article, please check

vue-srm-adminWhat did

pageMixin: List page function integration

  1. Monitor the page number and number of pages per page. When the page number/number of pages per page changes, the request is automatically triggered to obtain the corresponding data source.
  2. Filter the search criteria and automatically filter invalid attributes.
  3. Marks the status of the request and request completion.
  4. Check whether the current list needs to be refreshed. If so, the list is refreshed automatically.
  5. increasemixinHandleItemMethod, which is used to perform simplified data transfer and callback operations (if required) when the list data needs to be manipulated.
  6. The introduction ofSrmDialogCheckComponent, if you need to confirm before operating on data, you can pass in one or more data to complete the confirmation prompt.

detailMixin: Detail page function integration

  1. According to theidSet the title suffix of the current page:


  2. Custom title suffix:


  3. goListWithRefreshMethod: Mark the page that needs to be refreshed and determine whether you need to return immediately based on the parameters.

SrmTable: Configuration table component

Brief introduction:SrmTableIs displayed with list data in the list page, which displays the required data based on the configuration. With custom slot, render, formatter and other functions, it has high customizability under the premise of rapid development. It also exports Excel files based on table display columns without doing anything extra.

Attributes

parameter instructions type The default value
sourceData Displayed data array mandatory
total The total number of entries number mandatory
columns Fields to display (see code demo below) array mandatory
loading Loading or not boolean false
selectVisible Whether rows are selectable boolean true
pageRequest Page number and number of pages per page object {page: 1,pageSize: 10}
exportVisible Exportable or not boolean true
deleteVisible Whether you can delete them in batches boolean true
exportName The default name of the exported file string ‘ ‘
pageSizes Displays the number selector option Settings per page number[] []

Events

The method name instructions parameter
selectionChange This event is triggered when a selection changes selection
handleBatchDelete Click Batch Delete to trigger this event selection
changePage This event is triggered when a page number is switched page
changeSize This event is triggered when the number of entries per page is changed pagesize

Slot

name instructions
buttons Top area of table (usually used to display buttons)

Use the sample

Table code demo

SrmForm: configuration form component

SrmForm generates a form based on the configuration and can quickly edit details and filter list pages.

Attributes

parameter instructions type The default value
v-model Form data object object mandatory
formName Form data object name string mandatory
formItems Form field items (see code demo below) array mandatory
inline Inline form mode boolean false
submitMsg Submit button copy (hide button if value is false) string | boolean submit
resetMsg Reset button copy (hide button if value is false) string | boolean reset
labelWitdh The width of the form field label string auto
size Use to control the dimensions of components in this form string small
showBack Whether to show the back button boolean true
gutter Raster spacing (invalid when inline is true) number 24
btnCol Button area layout (invalid when inline value is true) string 24

Events

The method name instructions parameter
submit Click on the teaser to trigger the event There is no
after-reset Clicking the reset button triggers the event There is no

Slot

name instructions
buttons The area below the form (typically used to display buttons)

Use the sample

Form code Demo

vue-srm-adminThe source code will know

  1. Functional (functional component)
  2. v-bind
  3. Custom v – model
  4. .sync
  5. Dynamic components
  6. v-on
  7. $listeners
  8. FindComponents family of methods
  9. proxy
  10. $attrs

Projects show

Project source code project preview

conclusion

Vue-srm-admin has highly encapsulated forms and forms, and at the same time added common mixins, which greatly improved my efficiency and quality in the development of the company’s background management system. I believe it will also help you. Let’s go!

reference

  1. Vue-element-admin Base template
  2. How do I clean up my company’s back office system (2) – Encapsulate components
  3. Hand touch, take you with vue Lute background series four (vueAdmin a minimalist background base template)

Front-end exchange learning, welcome to add my wechat friend 13216698987, I will pull you to the front-end learning group.