⚠️ This article is the first article of the nuggets community and is prohibited from republication without authorization

Hello everyone, I am Aehyok 🎋, a Buddhist coder living in Shenzhen city 🧚🏻♀️. If you like my article called 🧚, you can gather spiritulist blog by clicking like.

Personal Github repository address: HTTPS :github.com/aehyok

This article explain the code warehouse address: https:github.com/aehyok/vue-… Currently developing and testing based on the Dev branch

Tencent cloud vue.tuokecat.com has been deployed in this demo (the server configuration is low, if the access is slow, please wait patiently).

Table List JSON configuration generator

  • 1. In the daily use of PC, most forms and lists are used, so table list and form form are unified encapsulation, and table list and form form can be quickly adapted through JSON configuration.
  • 2. Encapsulate ideas
    • A. List search criteria and search button, which can be decoupled from table, are currently placed in A separate component, so it is not considered in this section
    • B, table list display fields, according to different types
    • C. The configuration of the right-most operation button, such as (row editing, delete, etc.), will be injected according to the defined function, and the following function operation will be customized, which does not conflict with the table list
    • D, special fields, such as (ordinal fields, checkboxes, checkboxes, etc.)
    • E. Finally, of course, pagers are involved
  • 3. This chapter mainly records the table encapsulation of itself

Let’s start with a full demo

  • 1. List the configuration JSON of the fields
  {
    type:'checkbox'}, {type:'index'}, {prop: "title".label: "Title".align: "center"}, {prop: "createTime".label: "Creation time".align: "center".dateFormat: "yyyy-MM-dd HH:mm:ss".sortable: true
  },
  {
    prop: "state".label: "State".align: "center".dictionary: [{code: 0.name: "Pending review"},
      { code: 1.name: "Reviewed"},
      { code: 2.name: "Under review"]}, {},prop:"custom".label:"Custom".align: "center".html: (row, column) = > {
      return row.title==="Number three" ? `<span style="color: red;" >${ row.remark }</span>`:'undefined'}}Copy the code

The last field, custom, allows you to customize HTML to display complex components and style interventions

  • 2. Configure the button on the right
{
   width: 200.fixed: "right".list: [{id: "1".label: "View".type: "text".show: true.disabled: false.method: (index, row, ss) = >{ handleDetail(index, row, ss); }}, {id: "2".label: "Delete".type: "text".show: true.disabled: false.method: (index, row) = >{ handleDel(index, row); }}}]Copy the code

The handleDetail and handleDel functions can be customized to realize service connection.

  • 3. Final effect picture

Field configuration details

1. Configure common fields directly

Javascript {prop: "name", label: "facility name", align: "center",}Copy the code

2. Serial number field configuration (in the later stage, you can directly configure a customized serial number, temporarily increasing from 1 to +1)

```javascript
  {
    type: "index"
  }
```
Copy the code

3, Checkbox field configuration (later can add a single box configuration)

```javascript
  {
    type: "checkbox"
  }
```
Copy the code

4, date format field configuration, conversion format can be set

Javascript {prop: "recorDate", label: "return date ", align: "center", dateFormat:" YYYY-MM-DD "},"Copy the code

5. Dictionary data conversion

Javascript {prop: "sex", label: "sex", align: "center", dictionary:[{code: 1, name:' male ',}, {code: 2, name:' female ',}]}, ' 'Copy the code

6. Customize the display content of fields

Javascript {prop: "", label: "custom ", align: "center", HTML: (row, column) = > {return row. Name = = = "raise the pitch" | | row. Address = = = "22"? ` < span style = "color: red;" >${ row.address }</span>`:`222` } }, ```Copy the code

7. Display image

Javascript {prop: "image", label: "custom ", align: "center", image:'image'}, 'Copy the code

8, set the field sort (front-end automatic sort)

Javascript {prop: "image", label: "custom ", align: "center", sortable: true}Copy the code

9, set the field custom call interface sort

Javascript {prop: "image", label: "custom", align: "center", sortable: "custom"Copy the code

10. Other fields need to be added

.

The last

Github.com/aehyok/vue-…

This article does not cover packaged component code. For code questions, you can visit the github demo repository at the beginning of this article, which will be constantly updated to optimize the small demo.

github.com/aehyok/2021

Finally, I took notes in my daily work warehouse, mainly with links to articles and solutions to problems.