vue+element导入导出、查询列表 、分页后台数据交互

1. html代码展示

<template>
	<div class="hello">
	<el-header>
        <div class="container">
          <el-link href="/" type="info" :underline="false" class="headle">
            <el-image style="height: 28px;vertical-align: middle;" src="./images/help-docs-black.png"></el-image>
          </el-link>
          <nav class="header-nav">
            <ul>
              <li><el-link href="/" :underline="false" class="nav-link"></el-link></li>
              <li><el-link href="/login" :underline="false" target="_blank" class="nav-link"></el-link></li>
            </ul>
          </nav>
        </div>
      </el-header>
 <el-main>
        <div class="start-container">
          <div class="Import">
            <el-upload ref="upload" action="url" :auto-upload="false" :show-file-list="false" :before-upload="beforeUpload" :on-change="importExcel" accept=".xlsx,.xls"> 
              <el-button size="small" type="">导入</el-button>
            </el-upload>
            <el-button type="" size="small" @click="exportExcel" style="margin-left:8px;">导出</el-button>
          </div>
          <div class="search">
              <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="small" v-model="searchName"></el-input>
              <el-button type="primary" size="small" class="search-btn" @click="search">搜索</el-button>
          </div>
        </div>
        <template>
          <el-table v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255,1)" :data="list" id="out-table" border style="width: 100%" :row-key="getRowKey"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" :reserve-selection="true" label="全选" width="55" align="center"></el-table-column >
            <el-table-column fixed prop="img" label="图片" width="100" align="center">
              <template v-slot="scope">
                <img :src="scope.row.img" alt="" width="60" height="60">
             </template>
            </el-table-column>
            <el-table-column prop="func_label" label="功能标签" show-overflow-tooltip width="" align="center"></el-table-column>
            <el-table-column prop="product_lable" label="产品标签" show-overflow-tooltip width="" align="center"></el-table-column>
             <el-table-column prop="func_file" label="功能文件" show-overflow-tooltip width="" align="center"></el-table-column>
            <el-table-column prop="sku" label="SKU" width="120" align="center"> </el-table-column>
            <el-table-column prop="handle" label="handl" show-overflow-tooltip width="" align="center"></el-table-column>
            <el-table-column prop="metafield_attr" label="Metafield属性" show-overflow-tooltip width="140" align="center"></el-table-column>
            <el-table-column prop="output_format" label="输出格式" show-overflow-tooltip width="" align="center"></el-table-column>
            <el-table-column prop="deml_url" label="示例产品URL" show-overflow-tooltip width="" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
          :page-sizes="[10,20,30,50,100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
          :total="total" style="margin-top:18px;">
          </el-pagination>
        </template>
      </el-main>
      <el-dialog title="查看详情" :visible.sync="dialogVisible" width="50%" class="new-dialog">
        <el-row class="row-img">
          <el-col :span="24"><div><img :src="dialogData.img" alt="" width="100" height="100"></div></el-col>
        </el-row>
        <el-card class="box-card" shadow="always">
          <el-row>
            <el-col :span="5"><div>功能标签：</div></el-col>
            <el-col :span="19"><div>{{dialogData.func_label}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>产品标签：</div></el-col>
            <el-col :span="19"><div>{{dialogData.product_lable}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>功能文件：</div></el-col>
            <el-col :span="19"><div>{{dialogData.func_file}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>SKU：</div></el-col>
            <el-col :span="19"><div>{{dialogData.sku}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>Handle：</div></el-col>
            <el-col :span="19"><div>{{dialogData.handle}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>Metafield属性：</div></el-col>
            <el-col :span="17"><div>{{dialogData.metafield_attr}}</div></el-col>
            <el-col :span="2"><el-button size="mini" type="text" :data-clipboard-text="dialogData.metafield_attr" class="copy-btn" id="textMetafield" @click="copyMetafield">复制</el-button></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>输出格式：</div></el-col>
            <el-col :span="19"><div>{{dialogData.output_format}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><div>示例产品URL：</div></el-col>
            <el-col :span="17"><div>{{dialogData.deml_url}}</div></el-col>
            <el-col :span="2"><el-button size="mini" type="text" :data-clipboard-text="dialogData.deml_url" class="copy-btn" id="textUrl" @click="copyUrl">复制</el-button></el-col>
          </el-row>
        </el-card>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
	</div>
</template>

1. vue代码展示后台交互列、表搜索、分页共用一个接口

<script> 
import axios from 'axios';
import Clipboard from 'clipboard';//安装复制插件
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      list: [],
      searchName: "",
      searchsku:"",//点击分页页带的值
      limit: 10,
      page: 1,
      total: null,
      selectList: [],  // 选中需要导出的数据
      url:"",//导入action地址设置为空
      dialogVisible: false,//详情弹框隐藏
      dialogData:[],//详情弹框数据
      loading: true,//loading加载
    };
  },

  created(){//页面加载
    this.pageList()
  },

  computed: {
  },

  methods:{
    pageList() {//加载页面请求列表数据
      var _this = this;
      axios.get("https://pg.easyapps.pro/custom/CustomApi/customList").then(res => {//页面加载数据
        _this.list = res.data.data;
        _this.total = res.data.total
        if(res.data.code == 1){
          _this.loading=false //取消loading加载
        }
      });
    },

    beforeUpload(file) {//判断上传的文件格式导入
      let filename = file.name
      let arr = filename.split('.')
      if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
        this.$message.error('上传文件只能是 excel/xls 格式!')
        return false
      }
      return arr
    },
    importExcel(file) {//导入功能
      let fd = new FormData();
      fd.append('type',"import");//上传的类型
      fd.append('importFile',file.raw);//上传的文件
      let self = this
      axios.post("https://pg.easyapps.pro/custom/CustomApi/customOperation",fd).then(res => {//页面加载数据
      console.log(res);
        if (res.data.code == 1) {
          self.$message({
            type: 'success',
            message: '上传成功'
          })
          location.reload() //刷新当前页面
        }else {
          self.$message({
            type: 'warning',
            message: res.data.msg
          })
          return false
        }
      })
    },

    handleSelectionChange(row){//导出选中某条数据时
      this.selectList = row;
      console.log(this.selectList)
    },
    getRowKey(row){//根据table的key值分页选中
      return row.id;
    },
    exportExcel(){//导出功能
      if (this.selectList.length === 0) {//判断选中的条数
        this.$message({
          message: '请至少选择一条需要导出的数据',
          type: 'warning'
        });
        return;
      }
      let ep = new FormData();
      let id=[];
      ep.append('type',"export");//传参数
      for(let i=0;i<this.selectList.length;i++){
        id.push(this.selectList[i].id);//传文id
      }
      ep.append("id",id)
      this.$msgbox.confirm('该操作将导出选中的数据，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post("https://pg.easyapps.pro/custom/CustomApi/customOperation",ep).then(res => {//页面加载数据
          let resdata = res.data.data
          console.log(resdata);
          window.location.href = resdata;
          window.open(resdata,'_blank');
        });
      })
    },

    //分页数据渲染
    async getList() {
      let _this = this; 
      //给后台传分页值
      let page = _this.page;//当前页
      let limit = _this.limit;//每页显示几条数据
      let sku = _this.searchsku;//total携带值
      let Callback = await axios.post("https://pg.easyapps.pro/custom/CustomApi/customList",{"page":page,"num":limit,"sku":sku});
      _this.list = Callback.data.data;
      let num = Callback.data.total;
      _this.total = num;
    },
    handleSizeChange(val) {// 当每页数量改变
      // console.log(`每页 ${val} 条`);
      this.limit = val
      this.getList()
    },
    handleCurrentChange(val) {//当前页改变
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getList()
    },
   
    search() {//查询页面
      let sku = this.searchName;
      this.searchsku = sku;
      axios.post("https://pg.easyapps.pro/custom/CustomApi/customList",{"sku":sku}).then(res => {//页面加载数据
        this.list = res.data.data;
        this.total = res.data.total;
      });
    },

    handleClick(row) {//查看详情查看详情
      this.dialogData=row;
      this.dialogVisible = true;
    },

    copyMetafield(){//复制功能
      let textMetafield = new Clipboard('#textMetafield');
       textMetafield.on('success', (e)=> {
          console.log(e.action);
          this.$message('复制成功');
          textMetafield.destroy()
       })
    },

    copyUrl() {//复制功能
      let textUrl = new Clipboard('#textUrl');
      textUrl.on('success', (e)=> {
        console.log(e.action);
        this.$message('复制成功');
        textUrl.destroy()
      });
    }
    
  },
  mounted () {
    this.getList()
  }
  
}
</script>

3. css代码展示

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-header{
    width: 100%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0px 25px #C3C6C9!important;
    position: fixed;
    top: 0;
    z-index: 9;
  }
  .el-header .container{
    margin-right: auto;
    margin-left: auto;
    padding-left: 30px;
    padding-right: 30px;
  }
  .el-header .container:after{
    content:"";
    display:block;
    clear: both;
  }
  .el-header .container .headle{
    float:left;
    height:60px;
    line-height:60px;
  }
  .el-header .container .header-nav{
    float:right;
    color: #999999;
    font-size: 15px;
  }
  .el-header .container .header-nav ul {
    display: table;
    padding-left: 0;
    list-style: none;
    margin: 0;
    height:60px;
  }
  .el-header .container .header-nav ul > li {
    display: table-cell;
    padding: 0 10px;
    vertical-align: middle;
  }
  .el-header .container .header-nav ul > li .nav-link{
    font-family: 'Questrial', sans-serif;
    font-size: 15px; 
    font-weight: 600; 
    color: #000;
    padding: 1.22rem 0rem;
    position: relative;
  }
  .el-header .container .header-nav ul > li:hover .nav-link:after{
    content: "";
    width: 80%;
    height: 2px;
    left: unset;
    background: #1989fa;
    right: 50%;
    transform: translateX(50%);
    transition: width 0.3s;
    position: absolute;
    bottom: -1px;
    z-index: 3;
  }
  .el-header .container .header-nav ul > li:hover .el-link.el-link--default{
    color:#1989fa!important;
  }
  .start-container{
    display: flex;
    justify-content: space-between;
    padding:70px 0px 15px 0px;
  }
  .start-container .Import{
    float: left;
    display: flex;
    justify-content: center;
  }
  .start-container .search {
    float: right;
    display: flex;
    justify-content: center;
  }
  .start-container .search .search-btn{
    margin-left:-2px;
    border-top-left-radius:0px;
    border-top-right-radius:3px;
    border-bottom-left-radius:0px; 
    border-bottom-right-radius:3px;
    z-index:1;
  }
  .el-dialog__body .el-row{
    border-bottom: solid 1px #e5e5e5;
  }
  .el-dialog__body .el-row.row-img{
    border:0px;
  }
  .el-dialog__body .el-row.row-img img{
    border-radius:4px;
  }
  .el-dialog__body .el-row.row-img .el-col div{
    padding:0px;
    margin-bottom:20px;
    text-align:center;
  }
  .el-dialog__body .el-row .el-col div{
    line-height:20px;
    padding:10px 0px;
    font-size:12px;
  }
  .el-dialog__body .el-row .el-col .copy-btn{
   padding:13px 10px;
  }
</style>