封装组件——listPage页头及分页（vue+element）

最新推荐文章于 2022-12-06 14:56:57 发布

爱吃松果的美美

最新推荐文章于 2022-12-06 14:56:57 发布

阅读量424

点赞数

分类专栏：封装组件文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_37877794/article/details/116567330

版权

本文介绍了如何在Vue.js项目中使用Element UI库封装listPage组件，包括页头和分页功能。通过这次实践，你可以学习到Vue组件化开发的方法，以及Element UI的分页组件应用。

摘要由CSDN通过智能技术生成

<template>
  <div id="listPage">
    <scpsForm :label-width="labelWidth"
              inline
              :size="size"
              v-if="showSearchForm">
      <el-card class="___search"
               shadow="never">
        <div class="search-box"
             style="min-height: 38px;">
          <search class="normalSearch"
                  tag="search"></search>
          <el-form-item>
            <div class="searchIcon"
                 @click="showSearchMore = !showSearchMore"
                 v-if="searchMore && !hideMoreClick">
              <div class="searchIconBox">
                <touch-ripple :speed="2"
                              :opacity="0.3"
                              color="#fff"
                              transition="ease">
                  <el-button type="primary">更多</el-button>
                </touch-ripple>
              </div>
            </div>
          </el-form-item>

          <!-- <slot name="search">
          </slot> -->
          <div class="rightAction">
            <slot name="action">
              <el-form-item v-if="action.indexOf('import') >= 0">
                <el-upload class="upload-demo"
                           ref="upload"
                           action="#"
                           :show-file-list="false"
                           :on-change="uploadChange"
                           :auto-upload="false">
                  <el-button slot="trigger"
                             size="small"
                             type="primary">导入</el-button>
                </el-upload>
                <slot name=