vue+element 导入、导出、查询 （2021-11-13）

vue+element 导入、导出、查询、查看详情功能完整代码

1. html代码：

<el-header>
	<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" @click="search">搜索</el-button>
	</div>
</el-header>

<el-main>
	<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" style="width: 100%" :row-key="getRowKey"  @selection-change="handleSelectionChange">
	    <el-table-column type="selection" :reserve-selection="true" label="全选" width="55"></el-table-column >
	    <el-table-column fixed prop="img" label="图片" width="100">
	      <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="120"> </el-table-column>
	    <el-table-column prop="product_lable" label="产品标签" show-overflow-tooltip width=""> </el-table-column>
	    <el-table-column prop="sku" label="SKU" width="120"> </el-table-column>
	    <el-table-column prop="handle" label="handl" show-overflow-tooltip width=""> </el-table-column>
	    <el-table-column prop="metafield_attr" label="Metafield属性" show-overflow-tooltip width=""> </el-table-column>
	    <el-table-column prop="deml_url" label="产品URL" show-overflow-tooltip width=""> </el-table-column>
	     <el-table-column prop="group" label="产品组" show-overflow-tooltip width="120"> </el-table-column>
	    <el-table-column fixed="right" label="操作" width="120">
	      <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 @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
	  :page-sizes="[1,2,5,10]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
	  :total="total">
	  </el-pagination>
	</template>
</el-main>
<el-dialog title="查看详情" :visible.sync="dialogVisible" width="50%">
	<el-row>
	  <el-col :span="24"><div class="img"><img :src="dialogData.img" alt="" width="100" height="100"></div></el-col>
	</el-row>
	<el-row>
	  <el-col :span="6"><div>{{dialogData.id}}</div></el-col>
	  <el-col :span="6"><div>{{dialogData.sku}}</div></el-col>
	  <el-col :span="6"><div>{{dialogData.group}}</div></el-col>
	  <el-col :span="6"><div>{{dialogData.update_time}}</div></el-col>
	</el-row>
	<el-row>
	  <el-col :span="8"><div>{{dialogData.developer}}</div></el-col>
	  <el-col :span="8"><div>{{dialogData.func_file}}</div></el-col>
	  <el-col :span="8"><div>{{dialogData.func_label}}</div></el-col>
	</el-row>
	<el-row>
	  <el-col :span="12"><div>{{dialogData.product_lable}}</div></el-col>
	  <el-col :span="12"><div>{{dialogData.output_format}}</div></el-col>
	</el-row>
	<el-row>
	  <el-col :span="24"><div>{{dialogData.deml_url}}</div></el-col>
	  <el-col :span="24"><div>{{dialogData.handle}}</div></el-col>
	  <el-col :span="24"><div>{{dialogData.metafield_attr}}</div></el-col>
	  <el-col :span="24"><div class="create-time">{{dialogData.create_time}}</div></el-col>
	</el-row>

	<span slot="footer" class="dialog-footer">
	  <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
	</span>
</el-dialog>

2. js代码

<script> 
import axios from 'axios';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      list: [],
      data: [],
      searchName: "",
      limit: 10,
      total: null,
      page: 1,
      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.data = res.data.data;
        console.log(res)
        if(res.data.code == 1){
          _this.loading=false //取消loading加载
        }
        if(_this.data != undefined){
          _this.getList()
        }
      });
    },

    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');
        });
      })
    },

    //搜索功能
    getList() {
      // es6过滤得到满足搜索条件的展示数据list
      let list = this.data.filter((item) => item.sku.includes(this.searchName))
      this.list = list.filter((item, index) =>
          index < this.page * this.limit && index >= this.limit * (this.page - 1)
      )
      this.total = list.length
    },
    handleSizeChange(val) {// 当每页数量改变
      // console.log(`每页 ${val} 条`);
      this.limit = val
      this.getList()
    },
    handleCurrentChange(val) {//当前页改变
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getList()
    },
    search() {//查询页面
      this.page = 1
      axios.post("https://pg.easyapps.pro/custom/CustomApi/customsearch").then(res => {//页面加载数据
        this.data = res.data.data;
        this.getList()
      });
    },

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

  }
}
</script>

3. css 代码

<style scoped>
  body{
    margin: 0px;
  }
  .Import{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    justify-content: center;
  }
  .search {
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
  }
  .el-dialog__body .el-row .el-col .img{
    padding:0px;
    margin-bottom:10px;
    text-align:center;
  }
  .el-dialog__body .el-row .el-col div{
    line-height:20px;
    padding:5px 10px;
    font-size:12px;
  }
  .el-dialog__body .el-row .el-col .create-time{
    text-align:right;
  }
</style>