The purpose of building wheels is to develop more cool. Of course, everyone said, don’t make the same wheel, but I couldn’t find the same wheel, so I made one. I also saw that someone had encapsulated Element’s Table, but felt that the encapsulation was too shallow, not deep enough. Here’s what you might need, too.
It contains 2,388 words and takes six minutes to read.
Simultaneously published in zhihu column: Front-end micro-blog
As usual, before you start, post a Github address and ask star😂. Check it out on GitHub.
https://github.com/zollero/el-search-table-pagination
For those of you who use Vue for front-end development, you’ve probably heard of Element UI, a VUe-based UI component library developed by the Ele. me front-end team.
The most you can do with Element is a Table, which needs to support paging and search queries, as well as action buttons to process data.
A prelude to
There are many pages in the system that use Element’s Form, Table, and Pagination components. When there are too many pages, there will be a lot of duplicate code, which makes the proportion of business code is not high, and it needs to spend more time to maintain non-business code, which is not efficient and has some risks.
After writing a lot, I decided to encapsulate a generic component that would let me just focus on the business code.
Normally, we use Element’s Table, Pagination component to write a simple page that looks something like this.
(See larger version for clarity)
As you can see, there are a few things that need to be handled to write a page like this: default loading of data, paging switching, etc., all need to be handled separately. Generally, above the Table, there is also a search box, which has several search criteria input box to assist the search display data. These operation steps, is repetitive, and a new page, have to write again.
How can you tolerate such an inefficient thing? So el-search-table-pagination came into being to help developers write pages containing Form, table and Pagination components with Element.
For example, the function shown above, overwritten with el-search-table-pagination, looks like this.
(See larger version for clarity)
After refactoring, the code is much cleaner, the generic code is removed, and the developer only needs to focus on the business code, instead of maintaining a lot of duplicate code.
features
The example above describes the simple use of the El-search-table-pagination component. In order to keep it generic, some encapsulation is done. There are some details you may need to know.
-
By default, you use AXIos to query remote data, but you can also configure a wrapped AXIos (you may need to set some interceptors).
-
Maximise configurability so that you write as little HTML as possible and maximise support for features in Element (constantly updated)
-
You can also configure the search criteria in the search box, such as: input box, drop-down box, date selection box, date range selection box, etc. (more form item will be supported later)
-
In addition to support remote data paging query display, also support local data paging and query filtering
-
CSS styles use the styles found in Element. If you need to change the default style, just do it the same way
-
If you need to transform the table-column structure, you can use slot nesting
use
Use it in a similar way to Element.
If you want to use it directly without wrapping Axios yourself, you can do this:
import Vue from 'vue'import ElSearchTablePagination from 'el-search-table-pagination'// Default use axios as HTTP toolVue.use(ElSearchTablePagination)Copy the code
If you have your own wrapper around AXIos, you can pass it in by default when you use it, which will call the remote interface using your passed AXIos instance:
import Vue from 'vue'import ElSearchTablePagination from 'el-search-table-pagination'// You wrapped axios yourselfimport axios from './utils/axios'Vue.use(ElSearchTablePagination, {axios})Copy the code
Of course, you can also use CDN and use script tags to refer to HTML files.
Two demos were built on CODEPEN to show local data and remote data. The DEMO address is as follows:
Local data:
https://codepen.io/zollero/pen/wPRqYX
Remote data:
https://codepen.io/zollero/pen/xPmXBp
Welcome to wake up:
https://github.com/zollero/el-search-table-pagination/blob/HEAD/docs/zh_CN.md
Matters needing attention
How to convert the contents of a table-column
In many cases, the values of the columns in the interface need to be converted to display. The column property in the columns provides several ways to help you convert the values.
A filter,
If you only need to convert the value of this field using filter, assign the name of filter to filter. Note: Only filters registered globally in Vue are valid
// Convert the content using the filter attributeconst columns = [{prop: 'updateTime',Label: 'Update time ',width: 110,filter: 'formatDate'},.]Copy the code
The filter used above needs to be registered globally in Vue to be valid.
// You need to register the filter in advanceVue.filter('formatDate', (value) => {if (! value) return '';let d = new Date(value);return d.getFullYear() + '-'+ (d.getMonth() + 1) + '-'+ d.getDate()})Copy the code
Second, the render
If you want to use a function to convert, set the function to the Render property and return the final value.
// Use the render attribute to convert contentconst columns = [{prop: 'price',Label: 'priceminWidth: 130,Render: row => '${row.price} yuan'},.]Copy the code
Third, slotName
This is most intuitive if the content requires a piece of HTML to be repopulated into the table. Define a slot in the el-search-table-pagination tag and assign the slot value to slotName.
// Use the slotName attribute to transform the contentconst columns = [{Label: 'preview ',Prop: 'url', // this is optionalwidth: 380,slotName: 'preview-column'},.]Copy the code
The slot: preview-column used above needs to be declared in the el-search-table-pagination tag as follows:
// Declare slot, which supports responsible content rendering// The slot-scope property in the code is a property after Vue v2.5.x// If your Vue version is lower than V2.5. x, use slot<el-search-table-pagination:columns="columns". ><template slot="preview-column"slot-scope="scope"><img width="350px":src="scope.row.url" /></template></el-search-table-pagination>Copy the code
Operation column
In many scenarios, you need to add an action column to the right of the Table. The action column requires buttons to handle data interaction, etc.
In this case, you can use slot: Append under el-search-table-pagination and add an action column to the right of the table. The following is an example:
<el-search-table-pagination:columns="columns". ><el-table-column slot="append"><template slot-scope="scope"><div><el-button type="success">through</el-button><el-button type="danger">Back to the</el-button></div></template></el-table-column></el-search-table-pagination>Copy the code
Configure the Form
The plugin provides a configurable implementation of the Form Form by providing the form-options property, where the formOptions.forms property is an array used to configure multiple Form items.
The value of the Prop property defined by Forms is the parameter name that will be passed to the back-end interface. Of course, when passed to the back-end interface, it also carries paging parameters.
The first thing to notice is the attribute: form.itemType
ItemType Indicates the type of from item. Currently, there are four types: Input, Select, Date, and daterange. The default value is Input. Corresponding to the Element input box, drop-down box, date selection box, date range selection box.
A, the input
Input box is relatively simple, just need to set a few fields:
const forms = [{prop: 'url',Label: 'url ',Size: 'small', // OptionalitemType: 'input'},.]Copy the code
Second, the select
The drop-down box is a bit more complicated. In addition to the parameters to configure the input, there are a few parameters that need to be noted.
The value of the dropdown option in the dropdown box may be written in code or retrieved from the interface. So, there are two ways to write this.
// The value of the dropdown option is written into the codeconst forms = [{prop: 'status',Label: 'status ',size: 'small',itemType: 'select',options: [{value: '',Label: 'all'}, {value: '1',Label: 'pass'}, {value: '2',Label: 'Return'}]},.]// Some of the values of the dropdown options are written by code// Some parts are retrieved from the interfaceconst forms = [{prop: 'name',Label: 'name ',size: 'small',itemType: 'select',options: [{value: '',Label: 'all'}].// Fetch and URL are optional// selectUrl: 'http://x.com/a'selectFetch: axios.get('http://x.com/a')},.]Copy the code
Third, the date
This type is also relatively simple, very similar to input.
const forms = [{prop: 'date',Label: 'date ',size: 'small',editable: false,itemType: 'date',Placeholder: 'Please select the date'},.]Copy the code
Four, daterange
Daterange is designed for situations where a daterange is selected because it is common to encounter interfaces that require both the start date and the end date fields to be passed.
Unlike the previous types, daterange’s Prop property passes an array of field values for start and end dates, respectively.
const forms = [{prop: ['dateStart', 'dateEnd'],Label: 'date range ',size: 'small',editable: false,itemType: 'daterange',Placeholder: 'Please select date range'},.]Copy the code
Currently, only these four types are supported, and more type support will be added later.
At the end
The plugin has been published on NPM, you can download it directly and use it, or you can go to GitHub and throw a PR or ISSUE, in any case, welcome to star😂.
This article is a brief introduction to the functions of the plug-in. For more, please refer to the documentation.
NPM package address:
https://www.npmjs.com/package/el-search-table-pagination
