直接源码，虽然样式样式不好看，逻辑也不是最优，但是可以留作纪念。毕竟以后类似的功能只需要优化就可以了，不用每次都重头开始。。。

 <template><div class="pre_upload"><div class="pre_leve_one"><inputtype="text"v-model="keyword"@keyup.enter="loaddata"placeholder="请输入查询关键字"/><button @click="loaddata">查询</button>&nbsp;&nbsp;{{sel_msg}}</div><div class="pre_leve_two"><h4>这里展示搜索结果</h4><divdi="files_data"class="pre_files_data"v-show="show_tab"><table class="pre_dataintable"><thead><tr><th>序号</th><th>上传</th><th>名称</th><th>类型</th><th>大小</th><th>时间</th><th>操作</th></tr></thead><tbody><trv-for="(item,index) in pre_flies":key="index"><td>{{item.id}}</td><td>{{item.username}}</td><td class="pre_tab_name">{{item.name}}</td><td>{{item.type}}</td><td>{{item.size}}&nbsp;KB</td><td>{{item.date}}</td><td>&nbsp;&nbsp;<buttonclass="pre_btn_down"@click="down_file(item)">下载</button>&nbsp;&nbsp;</td></tr></tbody></table></div><divclass="pre_block"v-show="show_tab"><ul style="text-align: right; margin-right: 20px;"><li>当前页：<label>{{nowpage}}</label>&nbsp;合计页：<label>{{maxpage}}</label>&nbsp;&nbsp;<ahref="#"@click="firstpage">首页</a>|<ahref="#"@click="beforepage">上一页</a>|<ahref="#"@click="nextpage">下一页</a>|<ahref="#"@click="lastpage">尾页</a><inputtype="text"v-model="jumppage"value=""><ahref="#"@click="gopage"class="go">Go</a></li></ul></div></div><a id="downlink"></a><!-- 放置自定义组件 --><per-message :message_data="msg_obj" /></div>
</template> <script>
/*
名称：根据关键字查询 下载 预览 组件
日期：2019-03-19
作者：hj
目标：
1、根据关键字查询
2、由服务端生成相关文件，保存到指定路径，然后返回路径，
3、最后a标签绑定绑定返回的路径进行下载
*/
import { base_encode } from "@/utils/base64.js";
import { GetShort,BackSpecial } from "@/utils/localstore.js";export default {name: "pre_downfile",components: {    'per-message':()=>import("./pre_message.vue"),},data() {return {pre_flies: [],exist_data: [],show_tab: false,     sel_msg:'',pre_loading:false,keyword:'',    outFile: "",maxpage:'',nowpage:'',jumppage:'',msg_obj:{}};},  created:function(){this.nowpage=1;},methods: {firstpage:function(){if(Number(this.nowpage)>1){this.nowpage=1;this.loaddata();}else{this.msg_obj={'showtype':'warning','note':'已经是第一页'};}},beforepage:function(){if(Number(this.nowpage)>1){this.nowpage--;this.loaddata();}else{this.msg_obj={'showtype':'warning','note':'已经是第一页'};}},nextpage:function(){if(Number(this.nowpage)<Number(this.maxpage)){this.nowpage++;this.loaddata();}else{            this.msg_obj={'showtype':'warning','note':'已经是最后一页'};}},lastpage:function(){if(Number(this.nowpage)<Number(this.maxpage)){this.nowpage=this.maxpage;this.loaddata();}else{this.msg_obj={'showtype':'warning','note':'已经是最后一页'};}},gopage:function(){console.log('跳转到='+this.jumppage);if(Number(this.jumppage)>0 && Number(this.jumppage)<=Number(this.maxpage)){this.nowpage=this.jumppage;this.loaddata();}else{this.msg_obj={'showtype':'warning','note':'跳转页数不在规定范围内,请检查'+this.jumppage};}},loaddata:function(){console.log('查询='+this.keyword);var postdata='';postdata ='{"action":"data_downfile_art","user_no":"' +GetShort("userno") +'","upfile_name":"' +this.keyword +'","page_num":"'+this.nowpage+'","rowid":"0"}';postdata ='{"method":"File_down","data":"' + base_encode(postdata) + '"}';// 建议加载提示this.loading();this.pre_loading=false;this.$postfile("/Data_Back",postdata,() => {}).then(res => {this.pre_loading=true;try {         res=JSON.parse(res); console.log(res.data);         if (res.data.status == 1) {this.maxpage=res.data.allpage;res = res.data.data;              console.log(res);  var t=[];for(var i=0;i<res.length;i++){var td={};td.id=i+1;td.rowid=res[i].id;td.username=res[i].username;td.name=res[i].upfile_name;td.type=res[i].upfile_type;td.size=res[i].upfile_size;td.date=String(res[i].sys_date).substring(0,19);              t[i]=td;        }this.pre_flies=t;this.show_tab=true;} else {this.sel_msg = res.msg;}} catch (ex) {this.sel_msg = "查询失败"+ex;}});},down_file:function(parm){var postdata='';postdata ='{"action":"data_downfile_data","user_no":"' +GetShort("userno") +'","upfile_name":"' +parm.name +'","rowid":"'+parm.rowid+'"}';postdata ='{"method":"File_down","data":"' + base_encode(postdata) + '"}';// 建议加载提示this.loading();this.pre_loading=false;this.$postfile("/Data_Back",postdata,() => {}).then(res => {this.pre_loading=true;try {         res=JSON.parse(res); if (res.data[0].path!='') {this.downdata(BackSpecial(res.data[0].path),parm.name);} else {this.sel_msg = res.msg;}} catch (ex) {this.sel_msg = "查询失败"+ex;}});},downdata:function(down_name,excel_name){if(down_name!=""){this.outFile = document.getElementById("downlink");var href=window.location.origin+"/static/"+down_name;// console.log(href);this.outFile.download = excel_name; // 下载名称this.outFile.href = href; // 绑定a标签this.outFile.click(); // 模拟点击实现下载                    }},loading:function(){var time=0;var close=setInterval(function(){if(time%2==0){this.sel_msg='请等待,查询中......';}else{this.sel_msg='请稍等,查询中...';}if(this.pre_loading){clearInterval(close);}},500);}}
};
</script><style scoped>
.pre_upload {width: 100%;min-height: 200px;height: 100%;background-color: azure;text-align: center;/* padding: 10px 20px 10px 20px; */
}
.pre_leve_one {height: 25px;text-align: left;padding-top: 18px;padding-left: 15px;
}
.pre_leve_one > button {margin-left: 10px;border-radius: 2px;background-color: #fff;color: #000000;padding: 2px 10px 2px 10px;
}.pre_leve_two {/* padding: 5px; */margin: 15px;margin-top: 15px;border: 1px solid #191970;min-height: 200px;height: auto;
}.pre_files_data {width: 100%;min-height: 200px;height: auto;/* padding: 10px 20px 10px 20px; */
}.pre_files_data > ul {list-style: none;
}
.pre_files_data > ul > li {border: 1px solid black;
}
.pre_files_data > ul > li > span {margin-left: 5px;
}.pre_dataintable {margin-top: 15px;border-collapse: collapse;border: 1px solid #aaa;width: 95%;/* padding 没有作用 *//* padding: 0px 5px 10px 5px; */position: relative;left: 2%;
}
.pre_dataintable th {vertical-align: baseline;padding: 5px 15px 5px 6px;background-color: #c1ffc1;border: 1px solid #3f3f3f;text-align: left;color: #000000;font-size: 16px;font-weight: bolder;
}
.pre_dataintable td {/* vertical-align: text-top; */padding: 6px 15px 6px 6px;border: 1px solid #aaa;
}
.pre_dataintable tr:nth-child(odd) {background-color: #f5f5f5;
}
.pre_dataintable tr:nth-child(even) {background-color: #fff;
}.pre_tab_name {cursor: pointer;width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/* display: -webkit-box;-webkit-line-clamp: 0;-webkit-box-orient: vertical; */
}
.pre_tab_name:hover {cursor: pointer;background-color: #aaa;
}/* 下载按钮 */
.pre_btn_down {color: chartreuse;font-weight: bold;font-size: 16px;width: 100px;height: 30px;
}
/* 预览按钮 */
.pre_btn_canle {color: black;font-weight: bold;font-size: 16px;width: 100px;height: 30px;
}
/* 翻页样式 */
.pre_block {width: 100%;margin-top: 5px;margin-bottom: 5px;
}
.pre_block > ul {text-align: right;list-style: none;
}
.pre_block > ul > li > a {text-decoration: none;
}
.pre_block > ul > li > .go {display: inline-block;width: 40px;height: 20px;border: 1px solid #cccccc;background: #024aee;color: #fff;border-radius: 4px;text-align: center;margin-left: 5px;
}
.pre_block > ul > li > a:hover {color: #394656;
}
</style>