The el-table encapsulated in my own work, including the pager and el-table table, is saved
1. Component content
<template>
<div class="question-table">
<template>
<el-table :data="allDate.items" style="width: 100%">
<el-table-column v-if="isSerialShow" type="index" label="序号" />
<el-table-column
v-for="(item,index) in tableDetails"
:key="index"
:label="item.title"
:prop="item.key"
>
<!-- 过滤时间、前台是否显示 -> 插槽-->
<template slot-scope="{row}">
<span>
{
{
item.formatDate && item.formatDate(row.addDate)
||item.isFrontShow && item.isFrontShow(row.isFrontDisplay)
||item.stateNow && item.stateNow(row.state)
||item.aa && item.aa(row.state)
|| row[item.key]
}}
</span>
</template>
<!-- 过滤插槽-->
</el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="{row}">
<slot :row="row" />
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-row type="flex" justify="end">
<el-pagination
background
:current-page="parseInt(allDate.page)"
:page-sizes="[5, 10, 20, 50]"
:page-size="parseInt(allDate.pagesize)"
layout="prev, pager, next,sizes, jumper"
:total="parseInt(allDate.counts)"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-row>
</template>
</div>
</template>
<script>
export default {
name: 'QuestionTable',
components: {},
props: {
allDate: { // 所有数据信息
type: Object,
required: true
},
tableDetails: { // 表格的标题和字段
type: Array,
required: true
},
listPage: { // axios 发送的页码信息
type: Object,
required: true
},
pagesize: { // 获得以前的页大小，规避BUG
type: Number,
required: true
},
isSerialShow: { // 是否显示最左侧序号
type: Boolean,
default: true
}
},
data() {
return {
}
},
computed: {},
watch: {},
created() {
},
mounted() {},
methods: {
// 页码数量 改变
handleSizeChange(pagesize) {
this.$emit('update:listPage', {
page: 1,
pagesize: pagesize
})
this.$emit('updateList')
},
// 点击页码
async handleCurrentChange(page) {
this.$emit('update:listPage', {
page: page,
pagesize: this.pagesize
})
// 通知父组件刷新获取的数据
this.$emit('updateList')
}
}
}
</script>
<style lang="scss">
.el-table th{
background: #fafafa;
border-bottom: 1px solid #e8e8e8 !important
}
.el-pagination{
margin-top: 20px;;
}
.el-button--text{
font-size: 12px;
}
</style>
2. Use the parent component
<subject-table
:all-date="allDate"
:table-details="tableDetails"
:list-page.sync="listPage"
:pagesize="listPage.pagesize"
@updateList="getSubjectList()"
>
<template slot-scope="{row}">
// row 中可以获取到 当前行的值
</template>
</subject-table>3. The transmission format of each parameter is the same as:
1. allDate: all data --> required
It is the array that the current table needs to traverse, that is, the data that needs to be passed in the component, which is the basic data of the content traversed by each column in the component
2. tableDetails: title and query field --> required
The title and fields of the form, he is an array, contains two required attributes, and a filter, used to filter
key: field
It is el-table that needs to obtain the key value of the field inside it after traversing the allData passed just now, and is used to display the page. It is consistent with the field of the data to be obtained in allData
title: title
It is the title position of each column, usually this is set according to the ui, which is dead.
filter:
You can use import to introduce a filter, and return the filtered value, add it to the corresponding object, and set it in the template of the subcomponent to filter
Example: instance format of tableDeatils
import { formatDate, isFrontShow } from '@/filters'
tableDetails: [
{
title: '学科名称',
key: 'subjectName'
},
{
title: '创建日期',
key: 'addDate',
formatDate:formatDate
},
{
title: '前台是否显示',
key: 'isFrontDisplay',
isFrontShow: isFrontShow
},
]Note: Be sure to define it in the template of the subcomponent, otherwise it will not work!
3. listPage: page number information sent by axios --> mandatory
I get the content of the field rendered by the table, usually the passed page number, the current page number and how many pages are currently displayed
listPage example:
listPage: { // 传递页码
page: 1,
pagesize: 10
}The list-page.sync must be passed and the .sync modifier needs to be added, otherwise the page turning will not resend the axiox request!
4. pagesize: pass the page number returned by the backend alone --> must pass
Usually we get it in the third field listPage, and the internal logic must be passed again!
The delivery content is usually: listPage.pagesize
5. isSerialShow: serial number ---> optional
Pass a boolean value to control whether the first column displays the serial number, optional
6. @updateList method --> Required
When clicking the page number
When the number of pages changes
The child component will trigger the updateList method of the parent component and resend the axiox request to get the latest data
When updated, he will modify the listPage of the child component, and then the parent component will call the request interface again and bring the latest listPage to retrieve the data
The content of the field needs to be used in conjunction with the parent component and the child component. It is easier to understand with the Element-ui + child component code. Leave the content to prevent future forgetting. It is very useful~
Attached el-table document address: Element - The world's most popular Vue UI framework