Vue Element front-end application development table list display
1. List query interface effectBefore introducing any code processing logic, let's first have a sensory understanding, post a rendering, and then introduce the processing steps and precautions one by one.
The conventional list display interface is generally divided into several areas: one is the query area, one is the list display area, and one is the paging component area at the bottom. The query area is mainly used for layout of common conditions, and some global or batch operations are added, such as import, export, add, batch add, batch delete and other buttons; the main list display area is relatively complex, and requires a more user-friendly display of various data. It can be displayed in combination with tags, icons, buttons and other interface elements. The list generally includes some operations for processing single-line records, such as view, edit, and delete. If it is a batch deletion, it can be placed in the top button area. 2. Processing of query areaThe general interface effect of the query area is shown below. In addition to some commonly used query conditions, it also adds some common processing buttons, such as query, reset, add, batch delete, import, export, etc.
For the query area, it is also a form processing, so you also need to add a corresponding object to carry the form data. Add a searchForm model object and a pageinfo object for paging query in the data, as shown in the following code.
export default {
data() {
return {
listLoading: true,
pageinfo: {
pageindex: 1,
pagesize: 10,
total: 0
},
searchForm: {
ProductNo: '',
BarCode: '',
ProductType: '',
ProductName: '',
Status: 0
},The view template code is as follows
<el-form ref="searchForm" :model="searchForm" label-width="80px">
<el-row>
<el-col :span="6">
<el-form-item label="Product No." prop="ProductNo">
<el-input v-model="searchForm.ProductNo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Product Name" prop="ProductName">
<el-input v-model="searchForm.ProductName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Product Type" prop="ProductType">
<el-select v-model="searchForm.ProductType" filterable clearable placeholder="Please select">
<el-option
v-for="(item, key) in typeList"
:key="key"
:label="item.value"
:value="item.key"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Status" prop="Status">
<el-select v-model="searchForm.Status" filterable clearable placeholder="Please select">
<el-option
v-for="item in Status"
:key="item.Value"
:label="item.Text"
:value="item.Value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row style="float:right;padding-bottom:10px">
<el-button icon="el-icon-search" type="primary" round @click="search()">Search</el-button>
<el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">Reset</el-button>
<el-button icon="el-icon-document-add" type="success" round @click="showAdd()">Add</el-button>
<el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">Batch delete</el-button>
<el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">Import</el-button>
</el-row>The product type is a drop-down list. We get an object in the data area and traverse it to display the dictionary content. If we take some time, we can unify these drop-down lists according to a regular processing mode and define a dictionary component to implement it. Simply assign a Prop value of the dictionary type to bind the drop-down list. This will be discussed in detail later. In Vue's script processing logic, we can obtain data through the API in the Created declaration cycle, bind it to the model, and the interface will be automatically updated. The processing code is shown below.
created() {
// Get the product type for binding dictionaries, etc. GetProductType().then(data => {
if (data) {
data.forEach(item => {
this.productTypes.set(item.id, item.name)
this.typeList.push({ key: item.id, value: item.name })
})
}
});
// Get list information this.getlist()
},
methods: {
getlist() {
// Construct regular paging query conditions var param = {
type: this.producttype === 'all' ? '' : this.producttype,
pageindex: this.pageinfo.pageindex,
pagesize: this.pageinfo.pagesize
};
// Add the SearchForm conditions to param and submit the query param.type = this.searchForm.ProductType // Convert to the corresponding attribute Object.assign(param, this.searchForm);
// Get the product list, bind it to the model, and modify the number of pages this.listLoading = true
GetProductList(param).then(data => {
this.productlist = data.list
this.pageinfo.total = data.total_count
this.listLoading = false
})
},The Object.assign(param, this.searchForm); statement is used to overwrite the properties of the original object with the obtained query conditions, thereby implementing variable assignment of the query conditions. Obtaining list data is the process of introducing how to display table list data. The table interface effect is as follows.
First, define a table header, similar to the <table> tag in HTML, specify the style and some common operation functions, as shown in the following code.
<el-table
v-loading="listLoading"
:data="productlist"
border
fit
stripe
highlight-current-row
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
@selection-change="selectionChange"
@row-dblclick="rowDbclick"
>For specific properties, please refer to the properties of the Element component about the table control. In the table column, we mainly focus on its data binding. Next, define a column of checkbox selections for batch processing, such as batch deletion operations. <el-table-column type="selection" width="55"/> The next step is to convert the contents into table columns one by one according to the returned JSON attributes, as shown below.
<el-table-column label="Product Number" width="80">
<template slot-scope="scope">
{{ scope.row.ProductNo }}
</template>
</el-table-column>If we need to add processing effects in the display, we can usually modify the display effects in the template. The following is the processing of the unit, adding a tag mark to emphasize it.
<el-table-column align="center" label="Unit" width="80">
<template slot-scope="scope">
<el-tag type="" effect="plain"> {{ scope.row.Unit }}</el-tag>
</template>
</el-table-column>
For some effects that require judgment and processing, we can judge and output the content, as shown in the following status.
<el-table-column label="status" width="80">
<template slot-scope="scope">
<el-tag v-if="scope.row.Status==0" type="" effect="dark">Normal</el-tag>
<el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">Recommend</el-tag>
<el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">Disable</el-tag>
</template>
</el-table-column>
In addition, for some common date processing, we can use Formatter, Filter and other means to escape the content and remove the time part at the end. <el-table-column align="center" label="Creation Date" width="120" prop="CreateTime" :formatter="dateFormat" />
dataFormat is an escape function, and the function code is as follows.
dateFormat(row, column, cellValue) {
return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd') : ''
},When using it, you need to introduce a class library at the top import * as fecha from 'element-ui/lib/utils/date' For operations that require dictionary escaping, we can use Formatter to escape, such as adding a function to parse the corresponding value into Chinese information.
Effects can be escaped using Formatter
productTypeFormat(row, column, cellValue) {
var display = this.productTypes.get(cellValue)
return display || ''
},You can also use the Filter mode for processing. Here we introduce the operation processing using Filter. First, add the corresponding operation in the interface HTML code, as shown in the following code.
<el-table-column align="center" label="Product Type" width="120" prop="ProductType">
<template slot-scope="scope">
<el-tag type="danger"> {{ scope.row.ProductType | productTypeFilter }}</el-tag>
</template>
</el-table-column>Filter is actually a | filter symbol, followed by a filter function.
export default {
filters:
productTypeFilter: function(value) {
if (!value) return ''
var display = that.productTypes.get(value)
return display || ''
}
},It is worth noting that the Filter itself cannot reference the attribute list in the data for escaping. If necessary, the reference to this needs to be recorded in the hook function of beforeCreate, as shown in the following code.
For operation buttons, we only need to add one row to display several buttons. If permission control is required, we can determine the operable permissions based on the permission set.
<el-table-column label="Operation" width="140">
<template scope="scope">
<el-row>
<el-tooltip effect="light" content="View" placement="top-start">
<el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.ID)" />
</el-tooltip>
<el-tooltip effect="light" content="Edit" placement="top-start">
<el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.ID)" />
</el-tooltip>
<el-tooltip effect="light" content="Delete" placement="top-start">
<el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.ID)" />
</el-tooltip>
</el-row>
</template>
</el-table-column>Here, showView/showEdit/ShowDelete mainly performs some processing operations before the pop-up layer. We define several variables in the data item to determine which operation needs to be displayed. isAdd: false, isEdit: false, isView: false, isImport: false, For example, for editing operations, we need to use the API processing class to obtain backend data and assign it to the form object of the edit box for display.
showEdit(id) {
// After obtaining data using the API class through the ID parameter, assign it to the object for display var param = { id: id }
GetProductDetail(param).then(data => {
Object.assign(this.editForm, data);
})
this.isEdit = true
},For viewing processing, in addition to clicking on each row button to view the specified row records, we can also double-click the specified row to pop up the corresponding viewing record interface.
rowDbclick(row, column) {
var id = row.ID
this.showView(id);
},This is some processing events in the table definition
<el-table
v-loading="listLoading"
:data="productlist"
border
fit
stripe
highlight-current-row
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
@selection-change="selectionChange"
@row-dblclick="rowDbclick"
>The :visible property value of each dialog box determines which modal dialog box is displayed or hidden.
As for the deletion operation, we only need to confirm it, then submit it for remote processing, return the normal result, and prompt the user that the deletion is successful. The logic code is shown below.
showDelete(id) {
this.$confirm('Are you sure you want to delete the selected records?', 'Operation prompt',
{
type: 'warning' // success, error, info, warning
// confirmButtonText: 'OK',
// cancelButtonText: 'Cancel'
}
).then(() => {
// Delete operation processing code this.$message({
type: 'success',
message: 'Deleted successfully!'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Deleted'
});
});
},The above are some common operations for regular table list page query, list display, field escape, and some common processing for adding, editing, viewing, and deleting operations. By operating these models, we can reduce the tedious operations of re-obtaining the corresponding DOM in the past, and make the operation and processing of data much more convenient. The above is the detailed content of the table list display of Vue Element front-end application development. For more information about Vue Element, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Solutions for building ping and nfs in embedded Linux development environment
>>: Simple usage of MySQL temporary tables
Recommend
Solution to the problem of invalid width setting for label and span
By default, setting width for label and span is in...
HTML tags: sub tag and sup tag
Today I will introduce two HTML tags that I don’t...
How to install docker on centos
Here we only introduce the relatively simple inst...
IIS and APACHE implement HTTP redirection to HTTPS
IIS7 Download the HTTP Rewrite module from Micros...
Understanding of the synchronous or asynchronous problem of setState in React
Table of contents 1. Is setState synchronous? asy...
An example of dynamically implementing different styles of data in a column of el-table of element ui
Problem Description In the framework of Ele.me UI...
Detailed explanation of docker-machine usage
Docker-machine is a Docker management tool offici...
The vue configuration file automatically generates routing and menu instance code
Table of contents Written in front router.json Ro...
How to view files in Docker image
How to view files in a docker image 1. If it is a...
How to communicate between WIN10 system and Docker internal container IP
1. After installing the Windows version of Docker...
Mini Program Development to Implement Unified Management of Access_Token
Table of contents TOKEN Timer Refresher 2. Intern...
MySQL 8.0.11 installation and configuration method graphic tutorial (win10)
This article records the installation and configu...
Detailed explanation of nginx upstream configuration and function
Configuration Example upstream backend { server b...
Native js to realize bouncing ball
On a whim, I wrote a case study of a small ball b...
How to make a tar file of wsl through Docker
I've been playing with the remote development...