Qt 下拉复选框（MultiSelectComboBox）(一) 实现下拉框多选，搜索下拉框内容

news2025/2/24 21:21:43

文章目录

  • 本系列目录
  • 前言
  • 一、QCombobox的组成
  • 二、MultiSelectComboBox实现
    • 1. 总体实现
    • 2. QLineEdit部分
    • 3. QListWidget部分
      • 1. 搜索框部分
      • 2. 选项部分
    • 4. 对外接口定义
    • 5. 代码实现
  • 总结

本系列目录

Qt 下拉复选框（MultiSelectComboBox）(一) 实现下拉框多选，搜索下拉框内容
Qt 下拉复选框（MultiSelectComboBox）(二) 样式表设置
Qt 下拉复选框（MultiSelectComboBox）(三) 不能输入中文等问题修复

前言

  刚开始学习qt时，在遇到下拉复选框问题的时候总是使用表格来实现这个功能，因为表格单元格可以添加代理，而QComboBox类对象在设置代理后总是不生效。使用表格来实现，如果需求本来就是在表格中还好，但有时候只是需要一个下拉复选框，这个时候就需要隐藏边框，设置单元双击输入框禁用等等，会非常麻烦，而且最后的效果也是不敬人意，所以在仔细研究了QComboBox类对象之后，参考github大佬的示例实现了一个比较好用的下拉复选框。

在这里插入图片描述

参考博客地址：https://blog.csdn.net/u013135921/article/details/79437392
以下是本篇文章正文内容，主要实现功能，下面案例可供参考

一、QCombobox的组成

  QComboBox类对象由三部分组成：QLineEdit、QToolButton、QListWidget。
在这里插入图片描述

  • QLineEdit负责选中选项的显示，由此要设置为不可编辑状态。
  • QToolButton是一个弹出与隐藏下拉框的按钮。
  • QListWidget是最重要的一部分，所有选项内容显示的格式，自定义功能的添加主要都集中在这部分。

二、MultiSelectComboBox实现

1. 总体实现

  整个控件继承于QCombobox类。主要修改QLineEdit、QListWidget这两部分，QComboBox提供如下接口，可以将这两部分设置为新建的QLineEdit、QListWidget对象 （ line_edit_，list_widget_）。

代码如下（示例）：

this->setView(list_widget_);
this->setLineEdit(line_edit_);
  • line_edit_部分用来显示选择的结果和弹出下拉框，显示内容使用 “;” 进行分割
  • list_widget_下拉框部分，显示搜索框与选项。QListWidget类对象可以通过设置Item，在item中添加QWidget对象来实现一些特殊功能。这里的list_widget_，搜索框为QlineEdit类对象，用户输入搜索条件后显示符合条件的选项，用来解决选项过多的问题，选项为QCheckBox类对象，有“选中”和“未选中”两种状态。

2. QLineEdit部分

  这部分用来显示选择的结果和弹出下拉框，显示内容使用 “;” 进行分割。这里设置了点击QLineEdit也可以弹出下拉框，需要先将当前line_edit_对象安装(或注册)为事件过滤器，再重写eventFilter()函数。

代码如下（示例）：

    /*设置文本框*/
	//设为只读，因为该输入框只用来显示选中的选项，称为文本框更合适些
	line_edit_->setReadOnly(true);
	//把当前对象安装(或注册)为事件过滤器，当前也称为过滤器对象。事件过滤器通常在构造函数中进行注册。
	line_edit_->installEventFilter(this);
	//设置禁用样式，因为不受样式表控制，临时这样解决
	line_edit_->setStyleSheet("QLineEdit:disabled{background:rgb(233,233,233);}");


bool MultiSelectComboBox::eventFilter(QObject *watched, QEvent *event)
{
	//设置点击输入框也可以弹出下拉框
	if (watched == line_edit_ && event->type() == QEvent::MouseButtonRelease && this->isEnabled())
	{
		showPopup();
		return true;
	}
	return false;
}

3. QListWidget部分

  下拉框部分，显示搜索框与选项。

1. 搜索框部分

  设置list_widget_第一项的itemWidget为QLineEdit，用来输入检索条件，绑定textChanged(const QString&)信号，当输入内容发生变化时，下面显示选项发生相应变化。

初始化代码如下（示例）：

/*设置搜索框*/
	QListWidgetItem* currentItem = new QListWidgetItem(list_widget_);
	//设置搜索框提示信息
	search_bar_->setPlaceholderText("Search.........");
	//显示清除按钮
	search_bar_->setClearButtonEnabled(true);
	list_widget_->addItem(currentItem);
	list_widget_->setItemWidget(currentItem, search_bar_);

输入文本变化槽函数代码如下（示例）：

connect(search_bar_, SIGNAL(textChanged(const QString&)), this, SLOT(onSearch(const QString&)));

void MultiSelectComboBox::onSearch(const QString& _text)
{
	for (int i = 1; i < list_widget_->count(); i++)
	{
		QCheckBox *check_box = static_cast<QCheckBox*>(list_widget_->itemWidget(list_widget_->item(i)));
        //文本匹配则显示，反之隐藏
		//Qt::CaseInsensitive模糊查询
		if (check_box->text().contains(_text, Qt::CaseInsensitive))
			list_widget_->item(i)->setHidden(false);
		else
			list_widget_->item(i)->setHidden(true);
	}
}

2. 选项部分

  单击选项选中，选中后更新line_edit_内容，绑定stateChanged信号，鼠标单击选项时时，就会将所有选项遍历一遍，然后把选中的选项组织为字符串，更新到line_edit_上。发送信号void selectionChange(const QString _data);，此信号为选中选项发送变化时发出。

选项变化槽函数代码如下（示例）：

connect(checkbox, &QCheckBox::stateChanged, this, &MultiSelectComboBox::stateChange);

void MultiSelectComboBox::stateChange(int _row)
{
	Q_UNUSED(_row);
	QString selected_data("");
	int count = list_widget_->count();
	for (int i = 1; i < count; i++)
	{
		QWidget *widget = list_widget_->itemWidget(list_widget_->item(i));
		QCheckBox *check_box = static_cast<QCheckBox*>(widget);
		if (check_box->isChecked())
		{
			selected_data.append(check_box->text()).append(";");
		}
	}
	selected_data.chop(1);
	if (!selected_data.isEmpty())
	{
		line_edit_->setText(selected_data);
	}
	else
	{
		line_edit_->clear();
	}
	line_edit_->setToolTip(selected_data);
	emit selectionChange(selected_data);
}

4. 对外接口定义

  考虑到使用方便，这里定义了一些接口方便用户使用，接口含义见下方注释 （文本框代表line_edit_）。

接口定义如下（示例）：

    //隐藏下拉框
	virtual void hidePopup();

	//添加一条选项
	void addItem(const QString& _text, const QVariant& _variant = QVariant());

	//添加多条选项
	void addItems(const QStringList& _text_list);

	//返回当前选中选项
	QStringList currentText();

	//返回当前选项条数
	int count()const;

	//设置搜索框默认文字
	void SetSearchBarPlaceHolderText(const QString _text);

	//设置文本框默认文字
	void SetPlaceHolderText(const QString& _text);
	
	//下拉框状态恢复默认（所有选项都恢复为未选中状态）
	void ResetSelection();

	//清空所有内容（选项内容全部清空）
	void clear();

	//文本框内容清空（选项内容不清空，所有选项都恢复为未选中状态，文本框清空）
	void TextClear();

	//设置选中文本--单
	void setCurrentText(const QString& _text);

	//设置选中文本--多
	void setCurrentText(const QStringList& _text_list);

	//设置搜索框是否禁用
	void SetSearchBarHidden(bool _flag);

5. 代码实现

头文件：

#pragma once

#include <QComboBox>
#include <QListWidget>
#include <QLineEdit>
#include <QCheckBox>
#include <QEvent>

class MultiSelectComboBox : public QComboBox
{
	Q_OBJECT

public:
	MultiSelectComboBox(QWidget *parent = Q_NULLPTR);
	~MultiSelectComboBox();

	//隐藏下拉框
	virtual void hidePopup();

	//添加一条选项
	void addItem(const QString& _text, const QVariant& _variant = QVariant());

	//添加多条选项
	void addItems(const QStringList& _text_list);

	//返回当前选中选项
	QStringList currentText();

	//返回当前选项条数
	int count()const;

	//设置搜索框默认文字
	void SetSearchBarPlaceHolderText(const QString _text);

	//设置文本框默认文字
	void SetPlaceHolderText(const QString& _text);
	
	//下拉框状态恢复默认
	void ResetSelection();

	//清空所有内容
	void clear();

	//文本框内容清空
	void TextClear();

	//设置选中文本--单
	void setCurrentText(const QString& _text);

	//设置选中文本--多
	void setCurrentText(const QStringList& _text_list);

	//设置搜索框是否禁用
	void SetSearchBarHidden(bool _flag);

protected:

	//事件过滤器
	virtual bool eventFilter(QObject *watched,QEvent *event);

	//滚轮事件
	virtual void wheelEvent(QWheelEvent *event);

	//按键事件
	virtual void keyPressEvent(QKeyEvent *event);

private slots:

	//槽函数：文本框文本变化
	void stateChange(int _row);

	//槽函数：搜索框文本变化
	void onSearch(const QString& _text);

	//槽函数：点击下拉框选项
	void itemClicked(int _index);

signals:

	//信号：发送当前选中选项
	void selectionChange(const QString _data);

private:
	//下拉框
	QListWidget* list_widget_;
	//文本框，搜索框
	QLineEdit* line_edit_, *search_bar_;
	//搜索框显示标志
	bool hidden_flag_;
	//下拉框显示标志
	bool show_flag_;
};

实现：

#include "multi_select_combobox.h"

MultiSelectComboBox::MultiSelectComboBox(QWidget *parent)
	: QComboBox(parent)
	, hidden_flag_(true)
	, show_flag_(false)
{
	list_widget_ = new QListWidget();
	line_edit_ = new QLineEdit();
	search_bar_ = new QLineEdit();

	/*设置搜索框*/
	QListWidgetItem* currentItem = new QListWidgetItem(list_widget_);
	//设置搜索框提示信息
	search_bar_->setPlaceholderText("Search.........");
	//显示清除按钮
	search_bar_->setClearButtonEnabled(true);
	list_widget_->addItem(currentItem);
	list_widget_->setItemWidget(currentItem, search_bar_);

	/*设置文本框*/
	//设为只读，因为该输入框只用来显示选中的选项，称为文本框更合适些
	line_edit_->setReadOnly(true);
	//把当前对象安装(或注册)为事件过滤器，当前也称为过滤器对象。事件过滤器通常在构造函数中进行注册。
	line_edit_->installEventFilter(this);
	//设置禁用样式，因为不受样式表控制，临时这样解决
	line_edit_->setStyleSheet("QLineEdit:disabled{background:rgb(233,233,233);}");

	this->setModel(list_widget_->model());
	this->setView(list_widget_);
	this->setLineEdit(line_edit_);
	connect(search_bar_, SIGNAL(textChanged(const QString&)), this, SLOT(onSearch(const QString&)));
	connect(this, static_cast<void (QComboBox::*)(int)>(&QComboBox::activated), this, &MultiSelectComboBox::itemClicked);
}

MultiSelectComboBox::~MultiSelectComboBox()
{
}

void MultiSelectComboBox::hidePopup()
{
	show_flag_ = false;
	int width = this->width();
	int height = this->height();
	int x = QCursor::pos().x() - mapToGlobal(geometry().topLeft()).x() + geometry().x();
	int y = QCursor::pos().y() - mapToGlobal(geometry().topLeft()).y() + geometry().y();
	if (x >= 0 && x <= width && y >= this->height() && y <= height + this->height())
	{
	}
	else
	{
		QComboBox::hidePopup();
	}
}

void MultiSelectComboBox::addItem(const QString& _text, const QVariant& _variant /*= QVariant()*/)
{
	Q_UNUSED(_variant);
	QListWidgetItem* item = new QListWidgetItem(list_widget_);
	QCheckBox* checkbox = new QCheckBox(this);
	checkbox->setText(_text);
	list_widget_->addItem(item);
	list_widget_->setItemWidget(item, checkbox);
	connect(checkbox, &QCheckBox::stateChanged, this, &MultiSelectComboBox::stateChange);
}

void MultiSelectComboBox::addItems(const QStringList& _text_list)
{
	for (const auto& text_one : _text_list)
	{
		addItem(text_one);
	}
}

QStringList MultiSelectComboBox::currentText()
{
	QStringList text_list;
	if (!line_edit_->text().isEmpty())
	{
		//以;为分隔符分割字符串
		text_list = line_edit_->text().split(':');
	}
	return text_list;
}

int MultiSelectComboBox::count() const
{
	int count = list_widget_->count() - 1;
	if (count < 0)
	{
		count = 0;
	}
	return count;
}

void MultiSelectComboBox::SetSearchBarPlaceHolderText(const QString _text)
{
	search_bar_->setPlaceholderText(_text);
}

void MultiSelectComboBox::SetPlaceHolderText(const QString& _text)
{
	line_edit_->setPlaceholderText(_text);
}

void MultiSelectComboBox::ResetSelection()
{
	int count = list_widget_->count();
	for (int i = 1; i < count; i++)
	{
		//获取对应位置的QWidget对象
		QWidget *widget = list_widget_->itemWidget(list_widget_->item(i));
		//将QWidget对象转换成对应的类型
		QCheckBox *check_box = static_cast<QCheckBox*>(widget);
		check_box->setChecked(false);
	}
}

void MultiSelectComboBox::clear()
{
	line_edit_->clear();
	list_widget_->clear();
	QListWidgetItem* currentItem = new QListWidgetItem(list_widget_);
	search_bar_->setPlaceholderText("Search.........");
	search_bar_->setClearButtonEnabled(true);
	list_widget_->addItem(currentItem);
	list_widget_->setItemWidget(currentItem, search_bar_);
	SetSearchBarHidden(hidden_flag_);
	connect(search_bar_, SIGNAL(textChanged(const QString&)), this, SLOT(onSearch(const QString&)));
}

void MultiSelectComboBox::TextClear()
{
	line_edit_->clear();
	ResetSelection();
}

void MultiSelectComboBox::setCurrentText(const QString& _text)
{
	int count = list_widget_->count();
	for (int i = 1; i < count; i++)
	{
		//获取对应位置的QWidget对象
		QWidget *widget = list_widget_->itemWidget(list_widget_->item(i));
		//将QWidget对象转换成对应的类型
		QCheckBox *check_box = static_cast<QCheckBox*>(widget);
		if (_text.compare(check_box->text()))
			check_box->setChecked(true);
	}
}

void MultiSelectComboBox::setCurrentText(const QStringList& _text_list)
{
	int count = list_widget_->count();
	for (int i = 1; i < count; i++)
	{
		//获取对应位置的QWidget对象
		QWidget *widget = list_widget_->itemWidget(list_widget_->item(i));
		//将QWidget对象转换成对应的类型
		QCheckBox *check_box = static_cast<QCheckBox*>(widget);
		if (_text_list.contains(check_box->text()))
			check_box->setChecked(true);	
	}
}

void MultiSelectComboBox::SetSearchBarHidden(bool _flag)
{
	hidden_flag_ = _flag;
	list_widget_->item(0)->setHidden(hidden_flag_);
}

bool MultiSelectComboBox::eventFilter(QObject *watched, QEvent *event)
{
	//设置点击输入框也可以弹出下拉框
	if (watched == line_edit_ && event->type() == QEvent::MouseButtonRelease && this->isEnabled())
	{
		showPopup();
		return true;
	}
	return false;
}

void MultiSelectComboBox::wheelEvent(QWheelEvent *event)
{
	//禁用QComboBox默认的滚轮事件
	Q_UNUSED(event);
}

void MultiSelectComboBox::keyPressEvent(QKeyEvent *event)
{
	QComboBox::keyPressEvent(event);
}

void MultiSelectComboBox::stateChange(int _row)
{
	Q_UNUSED(_row);
	QString selected_data("");
	int count = list_widget_->count();
	for (int i = 1; i < count; i++)
	{
		QWidget *widget = list_widget_->itemWidget(list_widget_->item(i));
		QCheckBox *check_box = static_cast<QCheckBox*>(widget);
		if (check_box->isChecked())
		{
			selected_data.append(check_box->text()).append(";");
		}
	}
	selected_data.chop(1);
	if (!selected_data.isEmpty())
	{
		line_edit_->setText(selected_data);
	}
	else
	{
		line_edit_->clear();
	}
	line_edit_->setToolTip(selected_data);
	emit selectionChange(selected_data);
}

void MultiSelectComboBox::onSearch(const QString& _text)
{
	for (int i = 1; i < list_widget_->count(); i++)
	{
		QCheckBox *check_box = static_cast<QCheckBox*>(list_widget_->itemWidget(list_widget_->item(i)));
		//文本匹配则显示，反之隐藏
		//Qt::CaseInsensitive模糊查询
		if (check_box->text().contains(_text, Qt::CaseInsensitive))
			list_widget_->item(i)->setHidden(false);
		else
			list_widget_->item(i)->setHidden(true);
	}
}

void MultiSelectComboBox::itemClicked(int _index)
{
	if (_index != 0)
	{
		QCheckBox *check_box = static_cast<QCheckBox*>(list_widget_->itemWidget(list_widget_->item(_index)));
		check_box->setChecked(!check_box->isChecked());
	}
}

总结

通过这次制作下拉复选框，深入的了解了QComboBox的组成。
存在问题：1、输入框不能输入中文。
2、输入框点击后，再次点击不能隐藏下拉框
3、点击item空白部分会直接隐藏下拉框
优化：样式优化，后续有时间优化后会继续更新。

如果此文帮助到你( •̀ ω •́ )✧，动动小手点个赞可好O(∩_∩)O。

原创文章，转载请标明本文出处。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue3中使用ref语法糖

vue3中使用ref语法糖

自从引入组合式 API 的概念以来&#xff0c;一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题&#xff0c;而 ref 需要到处使用 .value 则感觉很繁琐&#xff0c;并且在没有类型系统的帮助时很容易漏掉 .value 以上是官方原话,大概…
阅读更多...
webrtc streamer前端页面js播放摄像头rtsp流

webrtc streamer前端页面js播放摄像头rtsp流

webrtc streamer 大致的了解了一下&#xff0c;就是使用js来播放rtsp视频流的一个技术。目前实现的厂家有很多&#xff0c;但是要收费。我这里是找了一个开源免费的项目&#xff0c;使用起来有一定的局限性&#xff0c;需要根据自己的业务自己去实现逻辑&#xff0c;目前我只做…
阅读更多...
盘点那些神级uniapp插件，总有一款让你事半功倍

盘点那些神级uniapp插件，总有一款让你事半功倍

自从有了uniapp&#xff0c;各位做小程序&#xff0c;app是不是感觉快起飞了&#xff0c;如果你想快速推出自己的移动端&#xff08;各平台小程序&#xff0c;安卓、苹果&#xff09;&#xff0c;那么uniapp还是很不错的&#xff0c;至少时间和研发成本可以帮你降低很多很多。 …
阅读更多...
VUE+BPMN.JS右侧属性栏自定义功能

VUE+BPMN.JS右侧属性栏自定义功能

博主最近项目需求要实现BPMNVUE实现流程自定义, 在完成基础功能后,要求右侧属性栏内的一些属性需要根据后端返回内容进行动态渲染, 这时候,用原来的属性栏明显就不满足需求,我找到的大部分博客包括官方都是建议你根据项目需求来全部重写一个属性栏.但是项目时间紧的情况下这种…
阅读更多...
React基础-JSX的本质-虚拟DOM的创建过程

React基础-JSX的本质-虚拟DOM的创建过程

文章目录JSX的本质虚拟DOM的创建过程JSX的本质 实际上&#xff0c;jsx仅仅只是 React.createElement(component, props, ...children) 这个函数的语法糖。 所有的jsx最终都会被转换成React.createElement的函数调用。 createElement需要传递三个参数: 参数一:type 当前元素的…
阅读更多...
Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“，深层次数据处理报错？？？？

Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“，深层次数据处理报错？？？？

vue中出现很烦人的红色报错&#xff0c;例如&#xff0c;如下图&#xff1a; 1. 2. Error in render: “TypeError: Cannot read properties of undefined (reading ‘name‘)“ 一般这样的length读取出现的报错&#xff0c;往往很令人苦恼&#xff0c;vue虽然正常渲染&#x…
阅读更多...
炫酷登录注册 完整功能版【本地存储+JS+HTML+CSS+jQuery】

炫酷登录注册 完整功能版【本地存储+JS+HTML+CSS+jQuery】

一&#xff1a;源码获取 &#x1f50d;说明&#xff1a; 这篇文章是完整功能的登录注册&#xff0c;包含了基于本地存储的注册&#xff0c;登录&#xff0c;以及密码修改功能&#xff0c;登录包含错误三次冻结账户1000s等细微功能&#xff0c;适合新入门前端的小伙伴拿来学习使…
阅读更多...
前端页面显示的时间格式为：2022-03-18T01:46:08.000+00:00 如何转换为：年-月-日 时:分:秒 ？

前端页面显示的时间格式为：2022-03-18T01:46:08.000+00:00 如何转换为：年-月-日 时:分:秒 ？

解决办法&#xff1a; 第一种办法&#xff1a;后端格式处理&#xff0c;在后端转数据格式为字符串类型 第二种办法&#xff1a;前端格式处理&#xff0c; ElementUI 中 Table-column Attributes 列属性中有一个 formatter参数 &#xff0c;用来格式化内容 &#xff0c; 里面可…
阅读更多...
SpringBoot+Vue实现文件上传下载功能

SpringBoot+Vue实现文件上传下载功能

前言 本文主要实现了以下功能&#xff1a; 1、 单文件上传以及多文件上传功能 2、 输入文件名下载文件功能 3、 输入音频文件名在线播放音频功能 一、项目基础部分搭建 1.1 前端项目搭建 1.1.1 新建前端项目 打开命令行输入以下命令&#xff0c;使用Vue CLI创建前端项目&a…
阅读更多...
浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--（后端、nginx、前端）

浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--（后端、nginx、前端）

目录 现象 原因 浏览器同源策略 导致结果&#xff1a; 解决方案 跨源资源共享&#xff08;CORS&#xff09; 各个端解决方法&#xff1a; 后端&#xff1a; 方式1&#xff1a;重载WebMvcConfigurer方法 方式2&#xff1a;配置监听CorsFilter 方式3&#xff1a;相关类…
阅读更多...
微信小程序--》你真的了解小程序组件的使用吗？

微信小程序--》你真的了解小程序组件的使用吗？

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…
阅读更多...
JAVA-分页查询

JAVA-分页查询

分页查询 分页查询将数据库中庞大的数据分段显示,每页显示用户自定义的行数,提高用户体验度,最主要的是如果一次性从服务器磁盘中读出全部数据到内存,有内存溢出的风险 真假分页 假分页: 其原理还是将所有的数据读到内存中,翻页从内存中读取数据, 优点: 实现简单,性能高 缺点…
阅读更多...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画

HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画

Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业&#xff0c;茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&#xff1a;样式 在操作…
阅读更多...
EasyExcel复杂表头导出（一对多）升级版

EasyExcel复杂表头导出（一对多）升级版

一、前言 在之前写的 EasyExcel复杂表头导出&#xff08;一对多&#xff09;的博客的结尾&#xff0c;受限于当时的能力和精力&#xff0c;留下一些问题及展望。现在写下此博客&#xff0c;目的就是解决之前遗留的问题。 背景介绍&#xff0c;见上述链接指向的博客&#xff0c;…
阅读更多...
vue3 route和router的区别以及如何传参数接受参数，如何像vue2一样使用$route和$router详解

vue3 route和router的区别以及如何传参数接受参数，如何像vue2一样使用$route和$router详解

vue3 route和router的区别以及如何传参数接受参数&#xff0c;如何像vue2一样使用$route和$router详解 因为我们在 setup 里面没有访问 this&#xff0c;所以我们不能再直接访问 this.$router 或 this.$route。作为替代&#xff0c;我们使用 useRouter 和useRoute函数,或者 Vu…
阅读更多...
HTML小游戏21 —— html5版暴打皮卡丘游戏（附完整源码）

HTML小游戏21 —— html5版暴打皮卡丘游戏（附完整源码）

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…
阅读更多...
微信小程序--基础内容（详解）（一）

微信小程序--基础内容（详解）（一）

一、常用标签 1、view 标签 view 标签是一个块级元素&#xff0c;类似于 div&#xff08;小程序里面没有div标签&#xff09;&#xff0c;里面可以放任何内容或者插值表达式&#xff0c;如下所示&#xff1a; <view>这是view标签<view> <view>{{num}}<…
阅读更多...
谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address

谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address

快速解决&#xff1a; 最近在测试http服务时&#xff0c;谷歌浏览器报了以下错误 “The request client is not a secure context and the resource is in more-private address space ‘local’”. 从报错信息来看&#xff0c;“不安全的请求方请求了更私有的本地资源” 对于…
阅读更多...
API接口开发其实特简单，Python Flask Web 框架教程来了

API接口开发其实特简单，Python Flask Web 框架教程来了

大家好&#xff0c;日常工作中&#xff0c;无论你是数据工程师、数据挖掘工程师&#xff0c;甚至数据分析人员&#xff0c;都不可避免的与他人进行数据交互&#xff0c;API接口提供数据是最常见的形式。 今天我给大家分享 Python Flask Web 框架教程&#xff0c;共计10个部分&…
阅读更多...
Vue面试题你知道多少

Vue面试题你知道多少

✅作者简介&#xff1a;大家好我是hacker707,大家可以叫我hacker&#xff0c;新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;带你玩转Vue &#x1f4ac;推荐一款模拟面试、刷题神器&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023