elmentUI 表格模板（1）

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

功能描述：

tabs切换、select选择、时间选择
查询、重置功能
图片预览
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-form><!-- 表格 --><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-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>

elmentUI 表格模板（1）相关推荐

奖励名单表格模板_员工出勤工薪记算表（行政人事模板）
员工出勤工薪记算表编号姓名部门年月到差年月日日期上午下午加班小计日期上午下午加班小计 1 16 2 17 3 18 ...
html表ge模板_16款用户体验优秀的HTML CSS价格表格模板附演示及下载
网友热度 159,461 ℃ - 4条评论如果我们在访问某些产品销售类网站的时候,看到产品的价目展示用户体验,很大程度上会影响我们的购买需求,所以说我们在自己.客户的网站价目表格展示的时候,用上特有 ...
birt报表模板只打印了第一行_财务系统全套表格模板201个！成为同事眼中的红人！低调分享...
之前也接触过软件开发,这不现在转岗做了会计也好多年了,最近老板给我们财务要表要的真是五花八门,难道老板就好看表吗? 这天天各种表的要谁能受的了,没想到之前做过的行业现在跨行了还能用得上,技术真是妙不可 ...
奖励名单表格模板_“我用一套表格，解决了孩子的拖延症，一路用到小学高年级！”...
橘子:周末好!陆陆续续给大家介绍过不少国外爸妈带孩子常用的时间管理和习惯培养方法,也分享过一些既有趣又实用的表格模板,不过橘子发现每隔一段时间,咱们花友中就会冒出厉害的"表哥".& ...
dw2020表格不可见_【分享表格模板】手把手教你算小目标实际本金和综合年化收益率...
By@阿常哟我在帖子快车真的太给力了!里分享过一次小目标投资收益的计算表格,当时在综合年化收益率的计算上有一点错误,我是粗暴地将单期的年化收益率累加.得出的数字大得惊人也不符合实际情况,所以我这次更新 ...
Excel表格模板打包下载┆收集了各类各行业Excel表格、word模板
Excel表格模板打包下载(2240个) 收集了各类各行业Excel表格模板下载链接:https://download.csdn.net/download/admin_maxin/20454566 ...
用JSP创建一个表格模板 .
项目中要用到一些展示信息的表格,表头不固定,表格内容是即时从后台取的:考虑到复用性,笔者用jsp编写了一个表格模板,可以从request中获取List封装的数据,然后通过JSTL结合EL表达式填充到模 ...
谷歌java模板_如何创建Google表格模板
谷歌java模板 If you find yourself creating the same spreadsheet outline over and over again in Google Sh ...
pscs6怎么做html模板,怎么在Adobe Photoshop CS6里制作表格模板（PS）怎么画表格
想要找使用PS快速制作表格的方法?快别闹了吧,表格的工作还是交个Excel表去做吧,Photoshop 就是用来作图的!话虽这么说,但是很多时候我们又不得不使用Photoshop制作表格,确实很捉急! ...

elmentUI 表格模板（1）

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

elmentUI 表格模板（1）相关推荐

最新文章

热门文章