In the case of Element-UI, although Element’s official El-Table component is already pretty good, it is targeted at a wide range of groups, and if we want more wrapping to reduce rework when writing backend systems. This time take advantage of their writing background system time to specific record how to package.
Analyze elder-UI’s official El-Table component
Table properties
The first step is to figure out which attributes are required every time in the project, which are suitable for default values, and which can be used as configurable items if they are not required. According to the most commonly used attributes of your project data, Stripe, and other attributes can be determined according to your own project.
Table method
The method is not used in the current project, but there is one that should be used, sort-change
Attributes of a table entry
The table has the most properties for each entry, including label, prop, width, fixed, sortable, formatter, and show-overflow-tooltip. In fact, according to your own project, you need to add an attribute whether it is a picture or not. After all, pictures in the table cannot be displayed, and you need to use other components to display pictures. The temporary attribute is isImg.
Table action button
Usually, the last column of the background system requires an operation. After all, there is a lot of data that needs to be manually operated, so some operation buttons need to be added to operate a certain line of data.
Define an imaginary data model
According to the above sharing, we will first define the required data or configuration items, so that when defining components later, we can generate the table content according to the defined data or configuration items.
Properties of table data
According to the attributes of the shared table data, there are only two data and stripe, and loading is required, so the structure looks like the following:
<template>
<div class="home">
test
</div>
</template>
<script>
export default {
name: "home".data() {
return {
table: {
stripe: false// Whether it is zebra loading:false// Data loading loading loading}}; },mounted() {}}; </script>Copy the codeLoading and stripe can be disabled because there is no data available
Now the most important data, there is no interface, so here we use the manual add data, that is, add data to the table object such an array to store the table data, as follows:
data() {
return {
table: {
stripe: false// Whether it is zebra loading:false// Loading data: [{date:"2016-05-02",
name: "Wang Xiaohu",
address: Lane 1518, Jiang Road, Putuo District, Shanghai
},
{
date: "2016-05-04",
name: "Wang Xiaohu",
address: Lane 1517, Jiang Road, Putuo District, Shanghai
},
{
date: "2016-05-01",
name: "Wang Xiaohu",
address: Lane 1519, Jiang Road, Putuo District, Shanghai
},
{
date: "2016-05-03",
name: "Wang Xiaohu",
address: Lane 1516, Jiang Road, Putuo District, Shanghai}}}; }Copy the codeAnd so the table’s properties are pretty much there.
Table method
The only method of table is sorting. Since it is not used in the project, this is just a way to provide an idea. You can add a new event configuration item in the table object as follows:
event: {
sortEvent: this.tableSort
}
Copy the codeIf tableSort is used, you can use element UI to sort the query.
Attributes of each data item in the table
First define several sets of data models, that is, add an array header to the table object for table generation, as follows:
header: [
{
prop: "selection",
width: "55"
},
{
prop: "date",
label: "Date of 11"
},
{
prop: "date",
label: "Date of 11",
width: "180",
formatter: "",
tooltip: false,
sortable:false,
fixed: "right"
},
{
prop: "date",
label: "Date of 11",
width: "180",
formatter: "",
tooltip: false,
sortable:false,
isImg:false,
fixed: "right"
},
{
prop: "options",
label: "Operation",
width: "180",
fixed: "right"}]Copy the codeThe first and last positions in the array are best left untouched. The first is the multi-select operation, and the last is the action bar
Action buttons for table data
If you have an action bar, you need an action button.
options: [
{
type: "success",
label: "通过",
event: this.submitBtn,
isShow: item => {
return item.status == 0 ? false : true; }}]Copy the codeIsShow why is the button displayed when there is a callback configured to return a Boolean value
Definition of a table component
Create a new table component and add the following code:
<template>
<el-table :data="table.data" v-loading="table.loading" :stripe="table.stripe">
</el-table>
</template>
<script>
export default {
props: {
table: Object
}
};
</script>
Copy the codeYou don’t see any effect at this point, so you introduce the component in the page (where the data was generated above), and then you generate the table content.
Generate multiple select operations
Prop selection = prop selection; prop selection = prop selection;
<template v-for="item in table.header">
<el-table-column type="selection" :width="item.width" v-if="item.prop == 'selection'"></el-table-column>
</template>
Copy the codeThe effect is as follows:
Generate list items
Table item is a specific table item attribute, configure the basic table data can be seen, here is not a single to say, directly look at the final code:
<template>
<el-table :data="table.data" v-loading="table.loading" :stripe="table.stripe">
<template v-for="item in table.header">
<el-table-column type="selection" :width="item.width" v-if="item.prop == 'selection'"></el-table-column>
<template v-else-if="item.prop == 'options'">
<template v-if="table.options.length">
<el-table-column :label="item.label" :width="item.width" :fixed="item.fixed">
<template slot-scope="scope">
<template v-for="btn in table.options">
<el-button
:type="btn.type"
v-if="btn.isShow ? btn.isShow(scope.row) : true"
@click="btn.event(scope.row)"
>{{btn.label}}</el-button>
</template>
</template>
</el-table-column>
</template>
</template>
<template v-else>
<template v-if="item.isImg">
<el-table-column :prop="item.prop" :label="item.label" :width="item.width">
<template slot-scope="scope">
<el-popover placement="left" trigger="click">
<div>
<el-image
style="width: 300px; height: auto;"
:src="scope.row[item.prop]"
fit="contain"
slot="reference"
></el-image>
</div>
<el-image
style="width: 100px; height: 100px;"
:src="scope.row[item.prop]"
fit="contain"
slot="reference"
></el-image>
</el-popover>
</template>
</el-table-column>
</template>
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
:formatter="item.formatter? item.formatter:null"
:show-overflow-tooltip="item.tooltip? item.tooltip:false"
:sortable="item.sortable? item.sortable:false"
v-else
></el-table-column>
</template>
</template>
</el-table>
</template>
<script>
export default {
props: {
table: Object
}
};
</script>
Copy the codeModifying initial Data
At this time, the basic package is ready, and the initial data can be modified as follows:
<template>
<div class="home">
<my-table :table="table"></my-table>
</div>
</template>
<script>
import myTable from "@/components/Table";
export default {
name: "home",
components: {
"my-table": myTable
},
data() {
return {
table: {
stripe: false// Whether it is zebra loading:false// Loading data: [{date:"2016-05-02",
name: "Wang Xiaohu",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
address: Lane 1518, Jiang Road, Putuo District, Shanghai
},
{
date: "2016-05-04",
name: "Wang Xiaohu",
img:
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
address: Lane 1517, Jiang Road, Putuo District, Shanghai
},
{
date: "2016-05-01",
name: "Wang Xiaohu",
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
address: Lane 1519, Jiang Road, Putuo District, Shanghai
},
{
date: "2016-05-03",
name: "Wang Xiaohu",
img:
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
address: Lane 1516, Jiang Road, Putuo District, Shanghai
}
],
event: {
sortEvent: this.tableSort
},
header: [
{
prop: "selection",
width: "55"
},
{
prop: "date",
label: "Date of 11",
width: "180",
formatter: ""
},
{
prop: "name",
label: "Name",
tooltip: false,
sortable: false
},
{
prop: "img",
label: "Avatar",
width: "180",
isImg: true
},
{
prop: "address",
label: "Address",
width: "180",
tooltip: true
},
{
prop: "options",
label: "Operation",
width: "200",
fixed: "right"
}
],
options: [
{
type: "success",
label: "通过",
event: this.checkPass,
isShow: item => {
return item.status == 0 ? false : true; }}, {type: "danger",
label: "No pass",
event: this.checkNoPass,
isShow: item => {
return item.status == 1 ? false : true; }}]}}; }, methods: { tableSort(val) { console.log(val); }, checkPass(val) { console.log(val); }, checkNoPass(val) { console.log(val); }}}; </script>Copy the codeThe effect is as follows:
