elmentUI 表格模板（1）拿来即用

功能描述：

1. tabs切换、select选择、时间选择
2. 查询、重置功能
3. 图片预览
4. table表格和分页

<!--* @Descripttion: elment表格模板
-->
<template><div> <!-- card卡片增加视觉感 --><el-card class="box-card"><el-radio-group v-model="tabPosition" style="margin-bottom: 20px;" @change="changeTabs"><el-radio-button label="top">全部（200）</el-radio-button><el-radio-button label="right">待处理（100）</el-radio-button><el-radio-button label="left">已处理（100）</el-radio-button></el-radio-group><!-- tabs切换 --><!-- 搜索 --><el-form :model="queryParams" ref="queryParams" :inline="true"><el-form-item label="商户名称:"  prop="shopName"><el-inputv-model="queryParams.shopId" placeholder="请输入商户名称"clearablesize="small"style="width: 160px"/></el-form-item><el-form-item label="推广平台:" prop="status"><el-selectv-model="queryParams.status"placeholder="推广平台"size="small"style="width: 160px"@change="changeSelect"><el-optionv-for="item in statusOptions":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="发布时间"><el-date-picker v-model="dateArray" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"@change="changeDate" style="width:360px;"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search"  size="small" @click="submitForm('queryParams')">搜索</el-button><el-button icon="el-icon-refresh" size="small" @click="resetForm('queryParams')">重置</el-button><!-- <el-button icon="el-icon-circle-plus-outline" size="small" type="primary" plain  @click="openMealHandle" >新增</el-button> --></el-form-item><!-- 表格 --><el-table  :data="dataList"  border style="width: 100%" size="small" max-height="680px" @row-click="goDetails"><el-table-column  label="商户ID" align="center"> </el-table-column><el-table-column  label="商户名称" align="center" show-overflow-tooltip><template slot-scope="scope">酱可爱符合实际的哈师大三个等级很高事件发生的就发给</template></el-table-column><el-table-column  label="手机号码" align="center"><template slot-scope="scope">16800008888</template></el-table-column><el-table-column  label="业务人员" align="center"></el-table-column><el-table-column  label="投诉原因" align="center"></el-table-column><el-table-column  label="补充描述" align="center"></el-table-column><el-table-column  label="图片" align="center" width="180"><template slot-scope="scope"><div class="img-box"><div v-for="(item,index) in imgList" :key="index"><img class="item-img" :src="item"  @click.stop="previewImage(item)"></div></div></template></el-table-column><el-table-column  label="投诉时间" align="center" show-overflow-tooltip><template slot-scope="scope">2021-11-04 11:20:20</template></el-table-column><el-table-column  label="状态" align="center"><template slot-scope="scope"><div>已处理</div><div>未处理</div></template></el-table-column><el-table-column  label="操作" align="center" fixed="right" width="100"><template slot-scope="scope"><!-- @click.stop 阻止冒泡事件 --><el-button  type="text"  size="small" @click.stop="confirm">处理</el-button><el-button  type="text"  size="small" @click.stop="openHandle">查看处理信息</el-button></template></el-table-column></el-table><!-- 分页 --><div class="pagination" style="margin-top:20px;text-align:center;"><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange"layout="total,prev, sizes, pager, next,jumper":current-page.sync="pagesQuery.pageNum":page-size="pagesQuery.pageSize":page-sizes="[10,30,50,100]":total="pagesQuery.total"></el-pagination></div></el-form></el-card><!-- 图片预览弹窗 --><el-dialog :visible.sync="preViewVisible" width="500px"><img width="100%" :src="preViewImageUrl" alt=""></el-dialog></div>
</template>
<script>
export default {name: '',data () {return {tabPosition:"top",dateArray: [], //选择时间// 查询参数queryParams: {shopName: '',status: 0,startTime:'',endTime:''},// 分页参数pagesQuery:{pageNum: 1,pageSize: 10,total:16},statusOptions: [{value: 0,label: "全部"},{value: 1,label: "来源1"},{value: 2,label: "来源2"},],dataList:[1,2,3,4,5,6,1,1,1,1,1,1,1,1,1,1,1,1],//图片预览preViewVisible: false,preViewImageUrl: "",imgList:["https://z3.ax1x.com/2021/08/12/fw4uHP.jpg","https://z3.ax1x.com/2021/08/12/fw4uHP.jpg","https://z3.ax1x.com/2021/08/12/fw4uHP.jpg","https://z3.ax1x.com/2021/08/12/fw4uHP.jpg","https://z3.ax1x.com/2021/08/12/fw4uHP.jpg"]}},methods: {// tabs切换changeTabs(e){console.log('tabs切换',e)},//选择日期changeDate(e) {console.log("changeDate 时间选择 ->", e);if (e) {this.queryParams.startTime = e[0];this.queryParams.endTime = e[1];} else {this.queryParams.startTime = "";this.queryParams.endTime = "";}},/** 搜索按钮操作 */submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {// alert("搜索 submit!");console.log('搜索 queryParams -> ', this.queryParams)} else {console.log("error submit!!");return false;}});},/**重置表单* 1、this.$refs 这个是必须dom渲染完成后。且表单需要有ref，formName的名字记得一致* 2、需要完整 el-form及 form-item 组件中 且 配置 prop，不配置的执行此方法，该输入框值不会重置。*/resetForm(formName) {this.$nextTick(() => {this.$refs[formName].resetFields();});console.log("重置后数据：", this.queryParams);},// select切换选中changeSelect(e){console.log('changeSelect->',e);},/**跳转到详情页面*/goDetails(row) {console.log("获取行 row 数据->", row);// this.$router.push({ path: "/marketManage/worthitDetails?id=" + row });},/**分页 */handleSizeChange(val) {this.pagesQuery.pageNum = 1;this.pagesQuery.pageSize = val;console.log("单页数量", val);},handleCurrentChange(val) {console.log("页数", val);this.pagesQuery.pageNum = val;},//图片预览previewImage(imgurl) {this.preViewVisible = true;this.preViewImageUrl = imgurl;},},
}
</script>
<style scoped>
.box-card{margin: 20px;
}/* 图片展示样式 */
.img-box{display: flex;flex-wrap: wrap;
}
.item-img{width: 40px;height: 40px;border-radius: 5px;margin:3px 5px;
}
</style>