article.vue + filter.vue + data.js 组成的页面
<><>article.vue<><>
<template>
<div class="manage">
<el-row :gutter="20">
<el-col :span="24">
<div class="panel">
<panel-title title="文章列表" />
<div class="panel-body">
// 导入
<filter-plus :filter-data.sync="filterData" />
<el-table v-loading="loadData" :data="admins" border style="width: 100%;" />
// 下一页
<!-- <div class="pagination">
<el-pagination style="text-align: center;margin: 15px 0 0 0;" :current-page="paging.currentPage"
:page-size="paging.pageSize" :total="paging.total" background layout="total, prev, pager, next"
@current-change="handleCurrentChange"
/>
</div> -->
</div>
</div>
</el-col>
</el-row>
<setting :command.sync="command" :admin-detail.sync="currentAdmin" :action.sync="action" />
</div>
</template>
<script>
import panelTitle from '@/components/panelTitle'
import filterPlus from './filter'
export default {
components: {
panelTitle,
filterPlus
},
data() {
return {
filterData: {
adminType: -1,
adminName: '',
agencyName: '',
execute: false
}
}
},
watch: {
'filterData.execute'(newValue, oldValue) {
if (newValue) {
console.log(this.filterData)
this.filterData.execute = false
}
}
}
}
</script>
<style lang="scss">
.manage {
.panel{
margin-bottom: 0;
}
.el-table__body-wrapper {
height: calc(100vh - 375px);
overflow-y: auto;
}
}
</style>
组件模板
<<--filter.vue-->>
<template>
<div class="admin-filter">
<el-row :gutter="20" class="filter-row">
<el-col :span="6">
<el-input v-model="filterData.adminName" placeholder="名称" />
</el-col>
<el-col :span="4">
<el-select v-model="filterData.adminType" placeholder="请选择">
<el-option key="-1" label="所有类型" :value="-1" />
<el-option
v-for="(k,v) in adminTypeMap"
:key="v"
:label="k"
:value="v"
/>
</el-select>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="run()">查询</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
import { adminTypeMap } from './data'
export default {
// props: {
// },
data() {
return {
adminTypeMap,
filterData: {
adminType: -1,
adminName: '',
agencyName: '',
execute: false
}
}
},
methods: {
run() {
this.filterData.execute = true
this.$emit('update:filterData', this.filterData)
}
}
}
</script>
<style lang="scss">
.admin-filter{
.filter-row{
margin-bottom:10px;
}
}
</style>
<>data.js<>
export const adminTypeMap = {
1: '文章一',
2: '文章一',
3: '文章一'
}