室内设计网站源码下载/竞价推广外包
1、此功能已集成到TQueryCondition组件中
2、最终效果
3、具体源码(新增moreChoose.vue)
<template><el-popoverpopper-class="t_query_condition_more":bind="popoverAttrsBind"ref="popover"v-if="allcheckList.length>0"><div class="inside_box"><div class="inside_box_title"><div>{{popoverAttrsBind.title||'所有条件'}}</div><div class="check-box"><el-buttonsize="mini"type="text"@click="handlecheckAll">{{popoverAttrsBind.allTxt||'全选'}}</el-button><el-buttonsize="mini"type="text"@click="handleReset">{{popoverAttrsBind.clearTxt||'清空'}}</el-button><el-buttonsize="mini"type="text"@click="handleReverseCheck">{{popoverAttrsBind.reverseTxt||'反选'}}</el-button></div></div><el-checkbox-group v-model="checkList" class="inside_box_main" @change="getcheck"><el-checkbox v-for="item of allcheckList" :key="item.name" :label="item.label"></el-checkbox></el-checkbox-group></div><span class="more_dropdown_icon" slot="reference"><span class="out_box">{{popoverAttrsBind.showTxt||'更多'}}</span><i class="el-icon-arrow-down"></i></span></el-popover>
</template>
<script>
export default {name: 'MoreChoose',props: {// 以下拉方式展示更多条件---数据源moreCheckList: {type: Array,default: () => []},// 更多条件--el-popover属性popoverAttrs: {type: Object,default: () => ({})}},data() {return {checkList: [],isCheckList: [], // 已选中allcheckList: this.moreCheckList // 全部可选项}},watch: {// 全部可选项moreCheckList: {handler(list) {this.allcheckList = list},deep: true},// 选中项checkList: {handler(nval, oval) {let list = []oval.forEach(ele => {if (!nval.some(val => val == ele)) {list.push(ele)}})this.isCheckList.forEach((ele, j) => {if (list.filter(val => val == ele.label)[0]) {delete this.isCheckList[j]}})}}},computed: {// 以下拉方式展示更多条件--属性popoverAttrsBind() {const popoverAttrs = { showTxt: '更多', title: '所有条件', allTxt: '全选', reverseTxt: '反选', clearTxt: '清空', ...this.popoverAttrs }return { placement: 'bottom', width: 240, trigger: 'click', ...popoverAttrs }}},methods: {// 全选handlecheckAll() {this.checkList = this.allcheckList.map((item) => item.label)// console.log('全选', this.checkList)this.isCheckList = this.allcheckListconst checkObj = this.analysisObj(this.isCheckList)this.$emit('getCheckList', checkObj)},// 反选handleReverseCheck() {const checkList = JSON.parse(JSON.stringify(this.checkList))this.checkList = []this.isCheckList = []this.allcheckList.forEach((ele, j) => {if (!checkList.filter((item1) => item1 == ele.label)[0]) {this.checkList.push(ele.label)this.isCheckList.push(ele)}})const checkObj = this.analysisObj(this.isCheckList)// console.log('反选', checkObj)this.$emit('getCheckList', checkObj)},// 清空handleReset() {// console.log('清空')this.checkList = []this.isCheckList = []this.$emit('getCheckList', {})},// 单选getcheck(val) {this.allcheckList.forEach((ele, j) => {if (val.filter(item1 => item1 == ele.label)[0]) {this.isCheckList.push(ele)}})// console.log('isCheckList---', this.isCheckList, this.checkList)const checkObj = this.analysisObj(this.isCheckList)// console.log('checkObj--222', checkObj)this.$emit('getCheckList', checkObj)},// 格式化analysisObj(val) {return val.reduce((obj, item) => {obj[item.prop] = {label: item.label,comp: item.comp,bind: item.bind,child: item && item.child,slotName: item && item.slotName,span: item && item.span,defaultVal: item && item.defaultVal}if (item.comp === 'el-select') {obj[item.prop].child = item.list.reduce((acc, cur) => {acc.push({comp: 'el-option',value: cur[item.valueKey || 'key'],bind: {label: cur[item.labelKey || 'label'],key: cur[item.valueKey || 'key']}})return acc}, [])}return obj}, {})}}
}
</script>
<style lang="scss">
.t_query_condition_more.el-popover {padding: 10px 15px;padding-top: 5px;.inside_box {display: flex;flex-direction: column;.inside_box_title {display: flex;justify-content: space-between;align-items: center;}.inside_box_main {display: grid;grid-template-columns: repeat(2, minmax(100px, 50%));.el-checkbox {display: flex;align-items: center;.el-checkbox__label {-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;min-width: 90px;}}}}
}
</style>
4、集成到TQueryCondition组件
注意点:开启以下拉方式展示更多条件禁用展开&收起功能
代码示例
<template><t-layout-page><t-layout-page-item><t-query-conditionref="queryCondition":opts="opts"isDropDownSelectMore:loading="loading":moreCheckList="moreCheckList"@submit="conditionEnter"@getCheckList="getChildCheck"><template #likeTransportNo="{param}"><el-input v-model="param.likeTransportNo" clearable placeholder="自定义插槽输入框" /></template></t-query-condition></t-layout-page-item></t-layout-page>
</template>
<script>
const ADDRESS_TYPES = [{label: '前纺一车间',key: 'W1'},{label: '前纺二车间',key: 'W2'},{label: '前纺三车间',key: 'W3'}
]
export default {name: 'queryData',data() {return {loading: false,queryData: {likeCargoNo: null,likeBookNo: null,likeTransportNo: null,likeCargoName: null,workshopNum: null,workshopNum1: null,date1: null,// date: null,},sexList: [],hobbyList: [],opts: {likeCargoNo: {label: '货源编号',comp: 'el-input'},likeBookNo: {labelRender: () => {return (<el-tooltip content={'自定义label'} placement="top"><div>订单编号</div></el-tooltip>)},placeholder: '自定义label',comp: 'el-input'},likeTransportNo: {label: '运单编号',comp: 'el-input',slotName: 'likeTransportNo',},likeCargoName: {label: '货品名称',comp: 'el-input',bind: {}},workshopNum1: {label: '车间2',comp: 'el-select',child: ADDRESS_TYPES.reduce((acc, cur) => {acc.push({comp: 'el-option',value: cur.key,bind: {label: cur.label,key: cur.key}})return acc}, [])},workshopNum: {label: '车间',comp: 'el-select',changeEvent: 'change',// defaultVal: 'W1',bind: {},child: [{comp: 'el-option',value: 'W1',bind: {label: '前纺一车间',key: 'W1'}},{comp: 'el-option',value: 'W2',bind: {label: '前纺二车间',key: 'W2'}},{comp: 'el-option',value: 'W3',bind: {label: '前纺三车间',key: 'W3'}}]},date1: {label: '日期',comp: 'el-date-picker',bind: {valueFormat: 'yyyy-MM-dd'}},},checkQuery: {}}},computed: {moreCheckList() {return [{ label: '姓名', comp: 'el-input', prop: 'name' },{ label: '年龄', comp: 'el-input', prop: 'age' },{ label: '性别', comp: 'el-select', prop: 'sex', valueKey: "value", list: this.sexList },{label: "爱好", comp: "t-select", prop: 'hobby', span: 2, bind: { multiple: true, optionSource: this.hobbyList, valueKey: "value", },},{ label: '合同号', comp: 'el-input', prop: 'contractNo' },{ label: '供应商', comp: 'el-input', prop: 'supplier' },{ label: '磅单号', comp: 'el-input', prop: 'balanceCode' },{ label: '车牌号', comp: 'el-input', prop: 'license' },{ label: '备注', comp: 'el-input', prop: 'remark' },{ label: '检验员', comp: 'el-input', prop: 'inspector' },{ label: '取样人', comp: 'el-input', prop: 'sampler' },{ label: '审核人', comp: 'el-input', prop: 'reviewer' },{ label: '其他检验项', comp: 'el-input', prop: 'physicsInspection' },{ label: '实际数量', comp: 'el-input', prop: 'factQuantity' }]}},watch: {checkQuery: {handler(nval, oval) {for (let i = 0; i < Object.keys(oval).length; i++) {this.$delete(this.opts, Object.keys(oval)[i])}this.opts = Object.assign({}, this.opts, nval)for (let i = 0; i < Object.keys(this.opts).length; i++) {this.queryData[Object.keys(this.opts)[i]] = null}},deep: true}},created() {this.getList()},// 方法methods: {getList() {this.sexList = [{ label: '男', value: '1' }, { label: '女', value: '2' }]this.hobbyList = [{ label: '吉他', value: '0' },{ label: '看书', value: '1' },{ label: '美剧', value: '2' },{ label: '旅游', value: '3' },{ label: '音乐', value: '4' }]},getChildCheck(val) {this.checkQuery = val},// 点击查询按钮conditionEnter(data) {this.loading = truethis.queryData = dataconsole.log('最终条件', this.queryData)setTimeout(() => {this.loading = false}, 2000)}}
}
</script>
5、以下拉方式展示更多条件–配置参数(Attributes)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
popoverAttrs | el-popover配置及中文文案 | object | 具体看源码 |
moreCheckList | 数据源 | Array | - |
-----label | 标题 | string | - |
-----comp | 组件名称,可直接指定全局注册的组件 | string,component | - |
-----prop | 接收字段(即后台接收字段) | string | - |
-----bind | 组件配置参数(Attributes) | object | - |
-----slotName | 自定义输入框插槽 | string | - |
-----span | 控件占用的列宽,默认占用 1 列,最多 4 列 (独占一行) | number | 1 |
-----defaultVal | 默认值 | string | - |
-----list | el-select 组件options 数据 | Array | - |
6. 事件(events)
事件名 | 说明 | 回调参数 |
---|---|---|
getCheckList | 下拉动态添加条件 | 返回选中的条件项 |
7、demo地址
GitHub源码地址
Gitee源码地址
相关文章
基于ElementUi或Antd再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档
相关文章:

vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件(支持全选、反选、清空)
1、此功能已集成到TQueryCondition组件中 2、最终效果 3、具体源码(新增moreChoose.vue) <template><el-popoverpopper-class"t_query_condition_more":bind"popoverAttrsBind"ref"popover"v-if"allcheckList.length>0"…...

LLM的训练与推断
LLM的训练与推断 目前比较流行的大模型一般都是自回归模型。在推理时,它类似于RNN,每次计算下一个token的概率。也就是说,如果除去最开始的输入情况下,最终推理长度为n的话,就需要计算n次。但是训练却是并行化的。 在…...

uniapp使用WebSocket uniapp使用WebSocket Uniapp整合WebSocket uniapp使用 websocket
uniapp使用WebSocket uniapp使用WebSocket Uniapp整合WebSocket uniapp使用 websocket 前言1、Socket.js2、main.js引入3、组件中调用 前言 代码中的示例只在 H5、APP环境下成功运行,小程序环境下如果无效,需要使用预编译 - 条件性的编译,适…...

SSH Exporter:基于Prometheus的远程系统性能监控神器
SSH Exporter English | 中文 介绍 SSH Exporter 是一个基于 Prometheus 规范的监控工具,通过 SSH 协议远程收集目标服务器的系统性能数据,如 CPU 使用率、内存使用情况、磁盘和网络 I/O 等,并将这些数据暴露为 Prometheus 格式的 metrics…...

Docker基础概念
Docker 是一个流行的容器化平台,它使开发者能够打包他们的应用程序及其依赖项到一个轻量级、可移植的容器中。这有助于确保应用程序无论在哪里运行都能获得一致的结果。以下是 Docker 的几个基础概念的详细解释: 1. Docker 镜像 (Image) 定义: Docker …...

小白进阶为大神
编程已成为当代大学生的必备技能,但面对众多编程语言和学习资源,新生们常常感到迷茫。如何选择适合自己的编程语言?如何制定有效的学习计划?如何避免常见的学习陷阱?今天,我就来分享一下这方面的经验和知识…...

2024最新Python和PyCharm的安装教程
Python和PyCharm的安装教程如下: Python安装教程 一、下载Python安装包 访问Python官方网站:Welcome to Python.org。 点击页面上方的“Downloads”链接。 在下载页面,选择“Windows”系统(以Windows系统为例)&…...

数据库死锁:深入解析与应对策略
在数据库管理系统中,死锁是一个常见且棘手的问题,它可能导致系统性能下降、事务延迟甚至完全阻塞。本文将深入探讨数据库死锁的概念、产生原因、检测方法以及预防与解决策略,帮助读者更好地理解和应对这一挑战。 一、什么是数据库死锁&#…...

Python入门宝藏《看漫画学Python》,495页漫画带你弄清python知识点!简单易懂 | 附PDF全彩版
华为出品的《看漫画学Python》全彩PDF教程是一本适合Python初学者的学习资料,通过漫画的形式将复杂的Python技术问题简单化,使学习过程更加生动有趣。以下是对该教程的内容简介、本书概要及本书目录的详细解析: 内容简介 《看漫画学Python》…...

Webshell管理工具:AntSword(中国蚁剑)
中国蚁剑是一款开源的跨平台网站管理工具,它主要面向于合法授权的渗透测试安全人员以及进行常规操作的网站管理员。 通俗的讲:中国蚁剑是 一 款比菜刀还牛的shell控制端软件。 一、中国蚁剑下载 1. 下载 AntSword-Loader https://github.com/AntSwordP…...

Java 中的File类
路径分为绝对路径和相对路径。 相对路径肯定是相对谁来说的,一般是一个文件相对于另外一个文件而言的路径。 下面是一个例子,比如index.htm如何找到photo.jpg呢? c:/website/web/index.htmc:/website/img/photo.jpg 所以在index.htm中使用…...

java将map转json字符串或者再将json字符串转回map,java将对象转json字符串或者互想转换,对象集合和json字符串互转
1.导入hutool工具依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency>2.直接复制一下代码运行 import cn.hutool.json.JSONUtil;import java.util.Ar…...

数据库管理-第225期 Oracle DB 23.5新特性一览(20240730)
数据库管理225期 2024-07-30 数据库管理-第225期 Oracle DB 23.5新特性一览(20240730)1 二进制向量维度格式2 RAC上的复制HNSW向量索引3 JSON集合4 JSON_ID SQL函数5 优化的通过网络对NVMe设备的Oracle的原生访问6 DBCA支持PMEM存储7 DBCA支持标准版高可…...

提高生产效率:最佳7大Bug记录工具
本文将分享2024年值得关注的7款Bug记录工具:PingCode、Worktile、禅道、Tapd、CODING、JIRA、Bugzilla。 Bug的管理和跟踪是一个不断挑战的任务,而一个高效的Bug记录工具不仅可以提高团队的生产效率,还能显著降低项目延误的风险。选择合适的工…...

DDOS攻击学习 - kali初学
文章目录 本地ssh配置nmap(网络连接的工具)nmap -sP IP地址nmap -p 1-65535 -A IP地址主机发现Ping扫描端口扫描时序扫描常用扫描方式 指纹识别与探测全端口版本探测防火墙/IDS逃逸报文分段 信息收集IP信息收集WHOIS查询 数据库渗透测试MySQL列举数据库列举MySQL变量 发起请求目…...

【C++】类和对象——流插入和流提取运算符重载
目录 前言ostream和istream自定义类型的流插入重载自定义类型的流提取重载解决私有问题日期类总接口 前言 我们在上一节实现日期类时,在输入和输出打印时,经常会调用两个函数: void Insert()//输入函数{cin >> _year;cin >> _mo…...

Vmware ubuntu20.04 虚拟文件夹
目录 1.vmware 设置 2.ubuntu设置 1.vmware 设置 设置完成后我们开机 2.ubuntu设置 我们打开终端 输入命令 vmware-hgfsclient可以看到你当前的共享文件 然后我们输入以下命令,用于将共享文件夹挂载到虚拟机中 sudo vmhgfs-fuse .host:/ /mnt -o nonempty -o …...

人工智能学习笔记 - 初级篇Ⅱ - 图形可视化 - 第11节: 绘制带填充区域的图表
微信公众号:御风研墨 关注可了解更多。问题或建议,请公众号留言 文章目录 绘制带填充区域的图表应用背景准备工作操作步骤工作原理补充说明最后 绘制带填充区域的图表 应用背景 在数据可视化中,带填充区域的图表可以有效地表示数据范围、趋…...

使用STM32实现一个线性代数计算器
文章目录 背景挑战与困难如何整合编译?error: non-ASM statement in naked function is not supportederror: #pragma import is an ARM Compiler 5 extension, and is not supported by ARM Compiler 6error: redefinition of __FILE 改造demo中的cout改造delete运…...

我在高职教STM32——串口通信(4)
大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正因如此,才有了借助 CSDN 平台寻求认同感和成就感的想法。在这里,我准备陆续把自己花了很多心思的教学设计分享…...

Redis 缓存中间件 缓存数据库
Redis 缓存中间件 缓存数据库 nginx web服务 PHP 转发动态请求 tomcat web页面也可以转发动态请求 springboot 自带tomcat 所有的数据库不支持高并发,一旦访问量激增,数据库很快就会崩溃。 Redis 非关系型数据库 nosql not only sql 不仅仅是sql 键值对…...

51、PHP 实现简单的快速排序
题目: PHP 实现简单的快速排序 描述: function simpleQuickSort(array $list) {$length count($list);if( $length < 1){return $list;}else{$pivot $list[0];$left_list array();$right_list array();for($i 1; $i < $length; $i){if($lis…...

如何应对机器视觉软件中时间篡改与许可绕过的挑战?
在机器视觉行业,软件许可绕过和时间篡改问题存在,这些行为对企业的正常运营和市场竞争力造成了严重威胁。机器视觉软件通常包含复杂的算法和大量的数据处理能力,广泛应用于制造、医疗和安防等领域。然而,未经授权的使用和人为篡改…...

python文件的读写
要在Python中读写文件,你可以使用以下方法: 1. 打开文件:使用open()函数打开文件,它接受两个参数:文件名和模式。模式可以是只读(r)、写入(w)、追加(a&#…...

2024下《网络工程师》案例简答题,刷这些就够了!
距离2024下半年软考已经越来越近了,不知道今年备考软考网络工程师的同学们开始准备了吗? 简答题一直是网工拿分的重点区域,对于许多考生来说,也往往是最具挑战性的部分。今天我就把那些重要的案例简答题类型整理汇总给大家&#x…...

Astro 实现TodoList网页应用案例
Astro 是一个现代化的静态站点生成器和前端框架,它具有独特的设计理念:岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站,将各种技术栈(如React、Vue、Svelte等)的组件无缝集成到同一个项目中。 1、创建项…...

计算机毕业设计Hadoop+Spark旅游景点可视化 旅游景点推荐系统 景区游客满意度预测与优化 Apriori算法 景区客流量预测 旅游大数据 景点规划
### 开题报告 **论文题目:** 基于Spark的旅游景点可视化系统的设计与实现 **研究背景与意义:** 随着旅游业的快速发展,人们对旅游信息的获取和处理需求越来越高。传统的旅游信息系统虽然能够提供静态的数据查询和展示功能,但在…...

MySQL存储
目录 1. MySQL存储引擎概述 2. 存储引擎的作用 3.存储引擎类型 4. 查看支持的存储引擎 6. InnoDB存储引擎 7. MyISAM与InnoDB的区别 8. 存储引擎的选择 9. 修改默认存储引擎 1. MySQL存储引擎概述 在MySQL中,数据通过不同的技术存储在文件(或内存…...

手势传感器 - 从零开始认识各种传感器【第十八期】
手势传感器|从零开始认识各种传感器 1、什么是手势传感器 手势传感器是一种能够感知人类手势或动作的传感器。它可以捕捉、识别和解释人类的手部动作或姿势,并将其转换成电信号或数字信号,通过识别人体的手势动作来实现与电子设备的交互,如控…...

【未来餐饮】 配送设置
一、创建门店 关键信息 1. 门店名字要有辨识度,尽量不和其他客户重名 2. 地址要具体到门牌号 3. 定位要和上面的地址一致 可以复制地址搜索地图,然后选择位置 二、创建配送模板 新建模板 填写模板 命名模板,勾上真省钱,然后保…...