vue 后台页面组件模板

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: '文章一'
}