【页面】表格展示

展示

Dom

<template><div class="srch-result-container"><!--左侧--><div class="left"><div v-for="(item,index) in muneList" :key="index" :class="(muneIndex==item.mm)?'active':''"@click="pageEventFun(1,item)">{{item.name}}</div></div><!--右侧--><div class="right"><!--搜索区--><div class="ceng1"><div v-for="(item,index) in srchFormOne" :key="index"><div>{{item.label}}:</div><div><!--输入框--><el-input class="selectOpt" size="small" style="width: 100px"v-if="item.type==1"v-model="srchForm[item.prop]"></el-input><!--下拉选择框--><el-select class="selectOpt" size="small" style="width: 120px"v-else-if="item.type==2"v-model="srchForm[item.prop]"popper-class="selectOptDown":popper-append-to-body="false"><el-option v-for="item99 in item.options":key="item99.value":label="item99.label":value="item99.value"></el-option></el-select><!--日期选择器--><el-date-picker v-else-if="item.type==3"v-model="srchForm[item.prop]"clearablevalue-format="yyyy-MM-dd"class="selfJStimeClass66"type="daterange":default-time="['00:00:00','23:59:59']"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></div></div><div class="btns"><div @click="pageEventFun(99)">查询</div><div @click="pageEventFun(98)" style="margin-left:20px;">重置</div></div></div><!--表格展示区--><div class="ceng2"><div class="table"><CompOneTable:key="timeRender"ref="CompOneTable":tableConfig="tableConfig"@tableEventCallback="tableEventCallback"></CompOneTable></div><div class="pageSize"><el-paginationclass="myselfPaginationClass"@current-change="handleCurrentChange":current-page.sync="currentPage"background:page-size="pageSize"layout="total, prev, pager, next":total="total"></el-pagination></div></div></div></div>
</template>

脚本

注意:

(1)CompOneTable组件可参考CompOneTable组件

(2)可根据需求进行左右两侧配置

<script>
import CompOneTable from "@/components/CompOneTable.vue";
import * as api from '@/api/srchResults.js';export default {components: {CompOneTable,},data() {return {timeRender:999999,//表格重加载标记//左侧区muneIndex:0,muneList:[{mm:0,name:"列表1"},{mm:1,name:"列表2"},],//搜索区srchForm:{int1:"",int2:"",int3:"",int4:"",int5:"",sele1:"",sele2:"",sele3:"",date1:[]},srchFormOne:[],srchFormList:[{mm:0,list:[{type:1,label:"姓名",prop:"int1"},{type:2,label:"状态",prop:"sele2",options:[{label:"全部",value:""},{label:"正常",value:"0"},{label:"禁用",value:"1"}]},{type:3,label:"操作时间",prop:"date1"},]},{mm:0,list:[{type:1,label:"姓名",prop:"int1"},]}],//表格区currentPage: 1,pageSize: 20,total: 0,tableHead:[{mm:0,list:[{ type: 62, prop: "name", label: "姓名" },{ type: 99, label: "操作", width:"140px", btns: [{ mm: 1, text: "删除" }]},]},{mm:1,list:[{ type: 62, prop: "name", label: "姓名" }]},],tableConfig: {height: 0,index: true,checkbox: false,head: [],data: [],},//接口srchAjax:[//查询{mm:0,ajax:"getSearchDatasAPI"},{mm:1,ajax:"getSearchDatasUser"},],deleAjax:[//删除{mm:0,ajax:"deleMoreDatasAPI"},{mm:1,ajax:"deleMoreDatasUser"},],};},created() {let hh= window.document.body.clientHeight - 240;this.tableConfig.height=hh},mounted() {this.pageEventFun(1,{mm:this.muneIndex})},methods: {//查询表格initTable(){this.tableConfig.data=[]this.total=0let ajaxHTTP=this.srchAjax.find(gg=>{return gg.mm==this.muneIndex})["ajax"]let {int1,int2,int3,int4,int5,sele1,sele2,sele3,date1}=this.srchFormlet params={page:this.currentPage,size:this.pageSize}if(this.muneIndex==0){params["name"]=int1}else if(this.muneIndex==1){params["name"]=int1if(date1.length!=0){params["startDateTime"]=date1[0]+" 00:00:00"params["endDateTime"]=date1[1]+" 23:59:59"}}api[ajaxHTTP](params).then((res)=>{if(res.code==200){this.tableConfig.data=res.datathis.total=res.totalCount}})},//初始化绑定initFormOrNumber(mms){//绑定表单if(mms.indexOf(1)!=-1){this.srchForm={int1:"",int2:"",int3:"",int4:"",int5:"",sele1:"",sele2:"",sele3:"",date1:[]}//初始化时间// let time=this.$commonOpt.getDateYMD(2)// this.srchForm.date1=[time[0]+" 00:00:00",time[1]+" 23:59:59"]}//页码if(mms.indexOf(2)!=-1){this.currentPage= 1this.pageSize= 20this.total= 0}//表格列if(mms.indexOf(3)!=-1){let inx=this.tableHead.findIndex(gg=>{return gg.mm==this.muneIndex})if(inx!=-1){this.tableConfig.head=this.tableHead[inx]["list"]}}//搜索区if(mms.indexOf(4)!=-1){let inx=this.srchFormList.findIndex(gg=>{return gg.mm==this.muneIndex})if(inx!=-1){this.srchFormOne=this.srchFormList[inx]["list"]}}},//事件pageEventFun(mm,item){if(mm==1){//左侧点击this.muneIndex=item.mmthis.timeRender=new Date().getTime()this.initFormOrNumber([1,2,3,4])this.initTable()}else if(mm==98){//重置this.initFormOrNumber([1])}else if(mm==99){//查询this.initFormOrNumber([2])this.initTable()}},//表格回调tableEventCallback(item, data, item2){if(item2){if(item2.mm==1){//删除this.$confirm("此操作将删除选中项, 是否继续?", "删除", {confirmButtonText: "确定",cancelButtonText: "取消",customClass:"tishiConClass"}).then(() => {let ajaxHTTP=this.deleAjax.find(gg=>{return gg.mm==this.muneIndex})["ajax"]let params={id:data.id}api[ajaxHTTP](params).then((res)=>{if(res.code==200){this.initTable()}})}).catch(() => {});}}},//翻页handleCurrentChange(val) {this.initTable();},},
};
</script>

样式

<style lang="less" scoped>
.srch-result-container {background: linear-gradient(0deg, #e8f2fc 0%, #f5fbfe 100%);width: 100%;height: 100%;padding: 10px;overflow: hidden;.left {float: left;width: 200px;height: 100%;background: #fff;border-radius: 6px;padding:20px 0px;box-sizing: border-box;&>div{line-height: 44px;text-align: center;border-radius: 4px;border: 1px solid transparent;color: #303133;font-size: 18px;font-weight: bold;cursor: pointer;&.active{background: #e7f3ff;color: #1b65b9;border: 1px solid #4d92f7;}}}.right {position: relative;z-index: 0;float: left;width: calc(~"100% - 220px");height: 100%;height: calc(~"100% - 1px");margin-top: 15px;.ceng1 {position: relative;height: 60px;display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;& > div {display: flex;align-items: center;margin-left: 20px;& > div:nth-child(1) {font-size: 16px;font-family: "SourceHanSansCN-Normal";color: #000;}input {width: 150px;}}& > div.btns {& > div {width: 114px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;color: #fff;font-weight: bold;font-size: 18px;letter-spacing: 2px;background: linear-gradient(0deg, #8f97fe 0%, #756cf7 100%);border-radius: 4px;&.btn2 {background: linear-gradient(0deg, #ff7777 0%, #f36262 100%);}}}}.ceng2 {height: calc(~"100% - 75px");border: 2px solid #ffffff;background: linear-gradient(0deg, #ffffff 0%, #eef7ff 100%);box-shadow: 5px 11px 32px 0px rgba(54, 78, 114, 0.1);border-radius: 12px;padding: 20px 20px 10px 20px;.table {height: calc(~"100% - 30px");}.pageSize {display: flex;justify-content: space-between;& > div:nth-child(2) {text-align: right;}}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GORM gorm.DB 对象剖析

文章目录 1.GORM 简介2.gorm.DB 简介2.1 定义2.2 初始化2.3 查询方法2.4 事务支持2.5 模型关联2.6 钩子&#xff08;Hooks&#xff09;2.7 自定义数据类型 3.为什么不同请求可以共用一个 gorm.DB 对象&#xff1f;4.链式调用与方法5.小结参考文献 1.GORM 简介 GORM 是一个流行…

基于c 实现 FIFO

功能&#xff1a; 1、读和写长度不限制 2、数据操作 和 指针操作分开&#xff08;如先操作数据&#xff0c;再操作指针&#xff09; 适用场景&#xff1a; 单向通信模式&#xff0c;一方写、一方读&#xff0c;可用于任务间单向通信&#xff08;无需锁&#xff09; 如&…

7-HDFS的文件管理

单选题 题目1&#xff1a;下列哪个属性是hdfs-site.xml中的配置&#xff1f; 选项: A fs.defaultFS B dfs.replication C mapreduce.framework.name D yarn.resourcemanager.address 答案&#xff1a;B ------------------------------ 题目2&#xff1a;HDFS默认备份数量&…

fastboot常用命令

fastboot常用命令 显示fastboot设备&#xff1a;fastboot devices 获取手机相关信息&#xff1a;fastboot getvar all 重启手机&#xff1a;fastboot reboot 重启到bootloader&#xff1a;fastboot reboot-bootloader 擦除分区&#xff1a;fastboot erase (分区名) 例&…

代码随想录算法训练营第四十三天 _ 动态规划_1049.最后一块石头的重量II、494.目标和、474.一和零。

学习目标&#xff1a; 动态规划五部曲&#xff1a; ① 确定dp[i]的含义 ② 求递推公式 ③ dp数组如何初始化 ④ 确定遍历顺序 ⑤ 打印递归数组 ---- 调试 引用自代码随想录&#xff01; 60天训练营打卡计划&#xff01; 学习内容&#xff1a; 1049.最后一块石头的重量II 该题…

360公司-2019校招笔试-Windows开发工程师客观题合集解析

360公司-2019校招笔试-Windows开发工程师客观题合集 API无法实现进程间数据的相互传递是PostMessage2.以下代码执行后,it的数据为(异常) std::list<int> temp; std::list<int>::iterator it = temp.begin(); it = --it; 3.API在失败时的返回值跟其他不一样是 …

微信小程序自定义tabBar简易实现

文章目录 1.app.json设置custom为true开启自定义2.根目录创建自定义的tab文件3.app.js全局封装一个设置tabbar选中的方法4.在onshow中使用选中方法最终效果预览 1.app.json设置custom为true开启自定义 2.根目录创建自定义的tab文件 index.wxml <view class"tab-bar&quo…

自动升降压稳压电源模块输入3v~24V输出3.3/4.2/5/9/12V芯片

自动升降压稳压电源模块是一种高效、高稳定性的电源解决方案&#xff0c;广泛应用于各种需要稳定电压输出的场合。该模块采用宽电压低功耗方案&#xff0c;能够自动升降压&#xff0c;适应不同的输入电压范围&#xff0c;同时具有关断功能&#xff0c;确保设备的安全运行。 该电…

Vue 报错error:0308010C:digital envelope routines::unsupported

因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制 方法一 windows终端输入 set NODE_OPTIONS--openssl-legacy-provider 方法二 降低node版本&#xff0c;比如16. 方法三 package.json增加如下配置 "scripts":…

想要更高效的文件传输?这些aspera替代方案可以助你一臂之力

随着数字化时代的不断推进&#xff0c;数据传输已成为各行各业、各类企业所必需的核心能力。而在文件传输方面&#xff0c;传统的方式往往面临着诸多问题&#xff0c;例如文件大小限制、传输速度过慢、不稳定、不安全等问题。为此&#xff0c;许多企业开始寻找更可靠、更高效的…

Java大数据开发入门教程:使用Hadoop处理海量数据

引言&#xff1a; 随着互联网的发展和智能设备的普及&#xff0c;数据量的爆炸式增长已成为现实。如何高效地处理和分析这些海量数据成为了当今技术领域的一个重要课题。在大数据领域&#xff0c;Hadoop作为一个开源的分布式计算框架&#xff0c;被广泛应用于海量数据的存储和处…

网工学习10-IP地址

一、IP地址概念 IP地址是一个32位的二进制数&#xff0c;它由网络ID和主机ID两部份组成&#xff0c;用来在网络中唯一的标识的一台计算机。网络ID用来标识计算机所处的网段&#xff1b;主机ID用来标识计算机在网段中的位置。IP地址通常用4组3位十进制数表示&#xff0c;中间用…

XHR 和 Fetch 的区别

网站开发普遍采用前后端分离的模式&#xff0c;数据交互成为了不可或缺的关键环节。在这个过程中&#xff0c;XHR 和 Fetch API 是两种最常见的方法&#xff0c;用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式&#xff0c;而 Fetch API 则代表了现代 Web 开发的新兴…

scipy笔记:scipy.interpolate.interp1d

1 主要使用方法 class scipy.interpolate.interp1d(x, y, kindlinear, axis-1, copyTrue, bounds_errorNone, fill_valuenan, assume_sortedFalse) 2 主要函数 x一维实数值数组&#xff0c;代表插值的自变量y N维实数值数组&#xff0c;其中沿着插值轴的 y 长度必须等于 x 的…

Linux:使用pv实现执行进度监控

pv全称&#xff1a;Pipe Viewer&#xff0c;通过管道显示数据处理进度的信息 安装 yum install pv -y示例 复制文件 # 显示进度 pv data.sql > ./data-new.sql330MiB 0:00:00 [1.32GiB/s] [>] 100%限制mysql数据导出速率 mysqldump | pv -L10m > data.sql# -L, -…

gitlab注册无中国区电话验证问题

众所周知gitlab对中国区不友好&#xff0c;无法直接注册&#xff0c;页面无法选择86的手机号进行验证码发送。 Google上众多的方案是修改dom&#xff0c;而且时间大约是21年以前。 修改dom&#xff0c;对于现在的VUE、React框架来说是没有用的&#xff0c;所以不用尝试。 直接看…

Docker 安装 Nacos

Docker 安装 Nacos tags: docker Nacos 文章目录 Docker 安装 Nacostags: docker Nacos 下载镜像docker 运行命令说明 Nacos 端口说明 下载镜像 下载镜像 # 搜索镜像 docker search nacos # 下载镜像 dockers pull nacos/nacos-server创建挂载文件夹 # 存放日志 mkdir naco…

Linux结束程序运行的命令

kill 通过进程 ID&#xff08;PID&#xff09;结束一个程序的运行。例如&#xff0c;要结束进程 ID 为 1234 的进程&#xff1a; kill 1234 pkill 通过进程名称结束一个程序的运行。例如&#xff0c;要结束名称为example_process的进程&#xff1a; pkill example_process …

postman参数为D:\\audio\\test.mp3请求报错

报错信息 报错 java.lang.IllegalArgumentException: Invalid character found in the request target [/v1/audio/transcriptions?audioPathD:\\audio\\test.mp3 ]. The valid characters are defined in RFC 7230 and RFC 3986 解决方式 yml文件上放行指定字符 relaxed-pa…

Mac电脑每次修改完java的版本后,没有成功

问题&#xff0c;本地有多个java版本8,11,15,17但是每次执行代码后&#xff0c;版本没有变化。在环境变量文件.bash_profile中设置无效 export JAVA_HOME/Library/Java/JavaVirtualMachines/<Java版本目录>/Contents/Home 这个问题通常是由于系统默认使用的Shell不同导…