empty来显示暂无数据简直太好用，阻止用户复制文本user-select
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了empty来显示暂无数据简直太好用，阻止用户复制文本user-select相关的知识，希望对你有一定的参考价值。
element-ui表格某一列无数据显示--
很多时候，表格的某一列可能是没有数据的。
空着了不好看，ui小姐姐会说显示 --
这个时候，小伙伴是怎么做的呢？
使用循环来判断是否为空，然后赋值为--
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" >
</el-table-column>
<el-table-column prop="name" label="姓名" >
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default
data()
return
tableData:[]
,
created()
let backArr = [
date: 2016-05-02,
name: ,
address: 上海市普陀区金沙江路 1518 弄
,
date: 2016-05-04,
name: 王小虎,
address: 上海市普陀区金沙江路 1517 弄
]
//使用循环来解决这个问题，这样做起来太麻烦了。
backArr.map((item) =>
if (!item.name)
item.name=--
return item
)
this.tableData= backArr
</script>
使用 css 一行代码解决
<style lang="scss" scoped>
.el-table /deep/ tbody td .cell:empty::after
content: -- !important;
// deep是scss中的穿透。
</style>
如何使用的是 Ant Design Vue中的表格组件
<style scoped lang="scss">
/deep/ .ant-table-tbody td:empty::after
content: ----;
</style>
简单的介绍一下 empty
:empty选择器选择每个没有任何子级的元素（包括文本节点）。
这里需要注意一下哈：
没有任何子级指的是有空标签都不行！！！如果你使用的工具有格式化，要注意哈~
p的子集元素为空，高度设置为30px,背景是粉色
<body>
<div class="cont-div">
<p>我是段落</p>
<p></p>
<p>我是段落</p>
<p></p>
<p>我是段落</p>
//这里，这个是不能被选中的
<p><span></span></p>
</div>
</body>
<style>
.cont-div p:empty
background-color: pink;
height: 30px;
</style>
为什么最后一个没有被选中呢？<p><span></span></p>
因为最后一个p标签并不是空的。它是有span标签的
没有任何子级指的是有空标签都不行的证明
<style>
.cont-div p:empty
background-color: pink;
height: 30px;
</style>
<body>
<div class="cont-div">
<p></p>
<p>我是段落</p>
<!-- 下面这个标签会被选中吗？ -->
<p> </p>
</div>
</body>
列表显示暂无数据
有些时候我们会使用v-if和velse还判断是否显示暂无数据提示。
很多使用都是这样操作的.
现在有了 empty 就简单多了
<div>
<div class="cont-box" v-if="datArrs.length">
<div v-for="(item, index) in datArrs" :key="index">
姓名： item.name 地址： item.address
</div>
</div>
<template v-else>
<div>暂无数据</div>
</template>
</div>
装简直太麻烦了。我们可以使用empty来解决
<template>
<div class="list-page">
<div class="cont-box">
<div v-for="(item, index) in tableData" :key="index">
姓名： item.name 地址： item.address
</div>
</div>
<el-button @click="handlerData">请求数据</el-button>
</div>
</template>
<script>
export default
data()
return
tableData: []
,
created()
setTimeout(() =>
this.tableData = [
date: 2016-05-02,
name: 王小虎,
address: 上海市普陀区金沙江路 1518 弄
]
,800)
,
methods:
handlerData()
let backArr = []
this.tableData= backArr
</script>
<style lang="scss" scoped>
.cont-box:empty::after
content: "暂无数据";
height: 30px;
</style>
最近遇见的一个问题
最近大家都在说前端已死，然后去卷后端。
不管前端是不是真的死还是假的死。
至少我身边的小伙伴们在卷其他的了。
我也开始报了一个PMP培训班，发现在网页上答完题后。
无法复制网页上的内容。我当时就有点心烦了。
无法复制文字，你难道让我一个一个的打字还是按f12.
我还真的按了f12,发现了一个新的属性 user-select
user-select的介绍
user-select:它的意识是==》是否能选取元素的文本。
它的值有4个值，最常用的是 user-select:none和text
1==》auto 默认值。如果浏览器允许，可以选择文本
2==》none 禁止选取文本。或者说光标无法选中文字
3==》text 文本可以被用户选中
4==》all 单击选取文本，而不是双击。
如果真的是 user-select 这个属性在作怪，
我们取消user-select属性不就行了。我尝试了一下
哈哈，真的可以，开心的笑了。
user-select:none 禁止文本被选中
<style>
body
user-select: none
</style>
<body>
<div class="cont-div">
<p> 目前的生成性人工智能形式（如 ChatGPT），可能是不可靠的，
要警惕聊天机器人中人工智能的陷阱。</p>
<p>为机器会给出一个看起来令人信服但却完全是捏造的答案。”</p>
</div>
</body>
user-select这个属性的运用场景
这个属性主要是用在阻止用户去复制文本内容，
现在很多特殊场景可能不允许赋值，
特别是网站答题场景、某些信息保密场景、付费场景。
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
Spring Boot + EasyExcel导入导出，简直太好用了！
背景
老项目主要采用的POI框架来进行Excel数据的导入和导出，但经常会出现OOM的情况，导致整个服务不可用。后续逐步转移到EasyExcel，简直不能太好用了。
EasyExcel是阿里巴巴开源插件之一，主要解决了poi框架使用复杂，sax解析模式不容易操作，数据量大起来容易OOM，解决了POI并发造成的报错。主要解决方式：通过解压文件的方式加载，一行一行地加载，并且抛弃样式字体等不重要的数据，降低内存的占用。
在之前专门写过一篇文章《EasyExcel太方便易用了，强烈推荐！》，介绍EasyExcel功能的基本使用。今天这篇文章，我们基于SpringBoot来实现一下EasyExcel的集成，更加方便大家在实践中的直接使用。
SpringBoot项目集成
依赖集成
创建一个基础的SpringBoot项目，比如这里采用SpringBoot 2.7.2版本。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
EasyExcel在SpringBoot的集成非常方便，只需引入对应的pom依赖即可。在上述dependencies中添加EasyExcel的依赖：
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.11</version>
</dependency>
EasyExcel目前稳定最新版本2.2.11。如果想查看开源项目或最新版本，可在GitHub上获得：https://github.com/alibaba/easyexcel。
为了方便和简化代码编写，这里同时引入了Lombok的依赖，后续代码中也会使用对应的注解。
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.22</version>
</dependency>
下面正式开始业务相关代码的编写。如果你想直接获得完整源码，对照源码阅读本篇文章，可在公号「程序新视界」内回“1007”获得完整源码。
实体类实现
这里创建一个Member，会员的实体类，并在实体类中填写基础的个人信息。
@Data
public class Member
/**
* EasyExcel使用：导出时忽略该字段
*/
@ExcelIgnore
private Integer id;
@ExcelProperty("用户名")
@ColumnWidth(20)
private String username;
/**
* EasyExcel使用：日期的格式化
*/
@ColumnWidth(20)
@ExcelProperty("出生日期")
@DateTimeFormat("yyyy-MM-dd")
private Date birthday;
/**
* EasyExcel使用：自定义转换器
*/
@ColumnWidth(10)
@ExcelProperty(value = "性别", converter = GenderConverter.class)
private Integer gender;
为了尽量多的演示EasyExcel的相关功能，在上述实体类中使用了其常见的一些注解：
- @ExcelIgnore：忽略掉该字段；
- @ExcelProperty(“用户名”)：设置该列的名称为”用户名“；
- @ColumnWidth(20)：设置表格列的宽度为20；
- @DateTimeFormat(“yyyy-MM-dd”)：按照指定的格式对日期进行格式化；
- @ExcelProperty(value = “性别”, converter = GenderConverter.class)：自定义内容转换器，类似枚举的实现，将“男”、“女”转换成“0”、“1”的数值。
GenderConverter转换器的代码实现如下：
public class GenderConverter implements Converter<Integer>
private static final String MAN = "男";
private static final String WOMAN = "女";
@Override
public Class<?> supportJavaTypeKey()
// 实体类中对象属性类型
return Integer.class;
@Override
public CellDataTypeEnum supportExcelTypeKey()
// Excel中对应的CellData属性类型
return CellDataTypeEnum.STRING;
@Override
public Integer convertToJavaData(CellData cellData, ExcelContentProperty excelContentProperty,
GlobalConfiguration globalConfiguration)
// 从Cell中读取数据
String gender = cellData.getStringValue();
// 判断Excel中的值，将其转换为预期的数值
if (MAN.equals(gender))
return 0;
else if (WOMAN.equals(gender))
return 1;
return null;
@Override
public CellData<?> convertToExcelData(Integer integer, ExcelContentProperty excelContentProperty,
GlobalConfiguration globalConfiguration)
// 判断实体类中获取的值，转换为Excel预期的值，并封装为CellData对象
if (integer == null)
return new CellData<>("");
else if (integer == 0)
return new CellData<>(MAN);
else if (integer == 1)
return new CellData<>(WOMAN);
return new CellData<>("");
不同版本中，convertToJavaData和convertToExcelData的方法参数有所不同，对应的值的获取方式也不同，大家在使用时注意对照自己的版本即可。
业务逻辑实现
为方便验证功能，DAO层的逻辑便不再实现，直接通过Service层来封装数据，先来看导出功能的业务类实现。
MemberService实现
定义MemberService接口：
public interface MemberService
/**
* 获取所有的成员信息
* @return 成员信息列表
*/
List<Member> getAllMember();
定义MemberServiceImpl实现类：
@Service("memberService")
public class MemberServiceImpl implements MemberService
@Override
public List<Member> getAllMember()
// 这里构造一些测试数据，具体业务场景可从数据库等其他地方获取
List<Member> list = new ArrayList<>();
Member member = new Member();
member.setUsername("张三");
member.setBirthday(getDate(1990, 10, 11));
member.setGender(0);
list.add(member);
Member member1 = new Member();
member1.setUsername("王红");
member1.setBirthday(getDate(1999, 3, 29));
member1.setGender(1);
list.add(member1);
Member member2 = new Member();
member2.setUsername("李四");
member2.setBirthday(getDate(2000, 2, 9));
member2.setGender(0);
list.add(member2);
return list;
private Date getDate(int year, int month, int day)
Calendar calendar = Calendar.getInstance();
calendar.set(year, month, day);
return calendar.getTime();
其中数据采用模拟的静态数据，返回Member列表。
简单导出实现
在Controller层的实现一个简单的导出实现：
/**
* 普通导出方式
*/
@RequestMapping("/export1")
public void exportMembers1(HttpServletResponse response) throws IOException
List<Member> members = memberService.getAllMember();
// 设置文本内省
response.setContentType("application/vnd.ms-excel");
// 设置字符编码
response.setCharacterEncoding("utf-8");
// 设置响应头
response.setHeader("Content-disposition", "attachment;filename=demo.xlsx");
EasyExcel.write(response.getOutputStream(), Member.class).sheet("成员列表").doWrite(members);
这个实现方式非常简单直接，使用EasyExcel的write方法将查询到的数据进行处理，以流的形式写出即可。
在浏览器访问对应的链接，可下载到如下Excel内容：
如果我们需要将导出的Excel进行一些格式化的处理，这就需要用到导出策略的实现了。
自定义导入实现
在EasyExcel执行write方法之后，获得ExcelWriterBuilder类，通过该类的registerWriteHandler方法可以设置一些处理策略。
这里先实现一个通用的格式策略工具类CommonCellStyleStrategy：
public class CommonCellStyleStrategy
/**
* 设置单元格样式(仅用于示例)
*
* @return 样式策略
*/
public static HorizontalCellStyleStrategy getHorizontalCellStyleStrategy()
// 表头策略
WriteCellStyle headerCellStyle = new WriteCellStyle();
// 表头水平对齐居中
headerCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
// 背景色
headerCellStyle.setFillForegroundColor(IndexedColors.SKY_BLUE.getIndex());
WriteFont headerFont = new WriteFont();
headerFont.setFontHeightInPoints((short) 15);
headerCellStyle.setWriteFont(headerFont);
// 自动换行
headerCellStyle.setWrapped(Boolean.FALSE);
// 内容策略
WriteCellStyle contentCellStyle = new WriteCellStyle();
// 设置数据允许的数据格式,这里49代表所有可以都允许设置
contentCellStyle.setDataFormat((short) 49);
// 设置背景色: 需要指定 FillPatternType 为FillPatternType.SOLID_FOREGROUND 不然无法显示背景颜色.头默认了 FillPatternType所以可以不指定
contentCellStyle.setFillPatternType(FillPatternType.SOLID_FOREGROUND);
contentCellStyle.setFillForegroundColor(IndexedColors.GREY_40_PERCENT.getIndex());
// 设置内容靠左对齐
contentCellStyle.setHorizontalAlignment(HorizontalAlignment.LEFT);
// 设置字体
WriteFont contentFont = new WriteFont();
contentFont.setFontHeightInPoints((short) 12);
contentCellStyle.setWriteFont(contentFont);
// 设置自动换行
contentCellStyle.setWrapped(Boolean.FALSE);
// 设置边框样式和颜色
contentCellStyle.setBorderLeft(BorderStyle.MEDIUM);
contentCellStyle.setBorderTop(BorderStyle.MEDIUM);
contentCellStyle.setBorderRight(BorderStyle.MEDIUM);
contentCellStyle.setBorderBottom(BorderStyle.MEDIUM);
contentCellStyle.setTopBorderColor(IndexedColors.RED.getIndex());
contentCellStyle.setBottomBorderColor(IndexedColors.GREEN.getIndex());
contentCellStyle.setLeftBorderColor(IndexedColors.YELLOW.getIndex());
contentCellStyle.setRightBorderColor(IndexedColors.ORANGE.getIndex());
// 将格式加入单元格样式策略
return new HorizontalCellStyleStrategy(headerCellStyle, contentCellStyle);
该类中示例设置了Excel的基础格式。
再来实现一个精细化控制单元格内容CellWriteHandler的实现类：
/**
* 实现CellWriteHandler接口, 实现对单元格样式的精确控制
*
* @author sec
* @version 1.0
* @date 2022/7/31
**/
public class CustomCellWriteHandler implements CellWriteHandler
/**
* 创建单元格之前的操作
*/
@Override
public void beforeCellCreate(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, Row row,
Head head, Integer integer, Integer integer1, Boolean aBoolean)
/**
* 创建单元格之后的操作
*/
@Override
public void afterCellCreate(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, Cell cell,
Head head, Integer integer, Boolean aBoolean)
/**
* 单元格内容转换之后的操作
*/
@Override
public void afterCellDataConverted(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder,
CellData cellData, Cell cell, Head head, Integer integer, Boolean aBoolean)
/**
* 单元格处理后(已写入值)的操作
*/
@Override
public void afterCellDispose(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder,
List<CellData> list, Cell cell, Head head, Integer integer, Boolean isHead)
// 设置超链接
if (isHead && cell.getRowIndex() == 0 && cell.getColumnIndex() == 0)
CreationHelper helper = writeSheetHolder.getSheet().getWorkbook().getCreationHelper();
Hyperlink hyperlink = helper.createHyperlink(HyperlinkType.URL);
hyperlink.setAddress("https://github.com/alibaba/easyexcel");
cell.setHyperlink(hyperlink);
// 精确设置单元格格式
boolean bool = isHead && cell.getRowIndex() == 1;
if (bool)
// 获取工作簿
Workbook workbook = writeSheetHolder.getSheet().getWorkbook();
CellStyle cellStyle = workbook.createCellStyle();
Font cellFont = workbook.createFont();
cellFont.setBold(Boolean.TRUE);
cellFont.setFontHeightInPoints((short) 14);
cellFont.setColor(IndexedColors.SEA_GREEN.getIndex());
cellStyle.setFont(cellFont);
cell.setCellStyle(cellStyle);
在这里，对单元格表头的第0个Cell设置了一个超链接。
通过上面的定义两个策略实现，在导出Excel可以使用上述两个策略实现：
/**
* 基于策略及拦截器导出
*/
@RequestMapping("/export2")
public void exportMembers2(HttpServletResponse response) throws IOException
List<Member> members = memberService.getAllMember();
// 设置文本内省
response.setContentType("application/vnd.ms-excel");
// 设置字符编码
response.setCharacterEncoding("utf-8");
// 设置响应头
response.setHeader("Content-disposition", "attachment;filename=demo.xlsx");
EasyExcel.write(response.getOutputStream(), Member.class).sheet("成员列表")
// 注册通用格式策略
.registerWriteHandler(CommonCellStyleStrategy.getHorizontalCellStyleStrategy())
// 设置自定义格式策略
.registerWriteHandler(new CustomCellWriteHandler())
.doWrite(members);
通过浏览器，访问上述接口，导出的Excel格式如下：
可以看出，导出的Excel已经附带了具体的格式。其中表头“用户名”上也携带了对应的超链接。其他更精细化的控制，大家可以在策略类中做进一步的控制。
同步获取结果导入实现
所谓的同步获取结果导入，就是执行导入操作时，将导入内容解析封装成一个结果列表返回给业务，业务代码再对列表中的数据进行集中的处理。
先来看同步导入的实现方式。
/**
* 从Excel导入会员列表
*/
@RequestMapping(value = "/import1", method = RequestMethod.POST)
@ResponseBody
public void importMemberList(@RequestPart("file") MultipartFile file) throws IOException
List<Member> list = EasyExcel.read(file.getInputStream())
.head(Member.class)
.sheet()
.doReadSync();
for (Member member : list)
System.out.println(member);
注意，在上述代码中，最终调用的是doReadSync()方法。
这里直接用PostMan进行相应的文件上传请求：
执行导入请求，会发现控制台打印出对应的解析对象：
Member(id=null, username=张三, birthday=Sun Nov 11 00:00:00 CST 1990, gender=0)
Member(id=null, username=王红, birthday=Thu Apr 29 00:00:00 CST 1999, gender=1)
Member(id=null, username=李四, birthday=Thu Mar 09 00:00:00 CST 2000, gender=0)
说明上传成功，并且解析成功。
基于监听导入实现
上面示例中是基于同步获取结果列表的形式进行导入，还有一种实现方式是基于监听器的形式来实现。这种形式可以达到边解析边处理业务逻辑的效果。
定义Listener：
public class MemberExcelListener extends AnalysisEventListener<Member>
@Override
public void invoke(Member member, AnalysisContext analysisContext)
// do something
System.out.println("读取Member=" + member);
// do something
@Override
public void doAfterAllAnalysed(AnalysisContext analysisContext)
// do something
System.out.println("读取Excel完毕");
// do something
在MemberExcelListener中可以针对每条数据进行对应的业务逻辑处理。
对外接口实现如下：
/**
* 基于Listener方式从Excel导入会员列表
*/
@RequestMapping(value = "/import2", method = RequestMethod.POST)
@ResponseBody
public void importMemberList2(@RequestPart("file") MultipartFile file) throws IOException
// 方式一：同步读取，将解析结果返回，比如返回List<Member>，业务再进行相应的数据集中处理
// 方式二：对照doReadSync()方法的是最后调用doRead()方法，不进行结果返回，而是在MemberExcelListener中进行一条条数据的处理；
// 此处示例为方式二
EasyExcel.read(file.getInputStream(), Member.class, new MemberExcelListener()).sheet().doRead();
这里采用了doRead()方法进行读取操作。在PostMan中再次上传Excel，打印日志如下：
读取Member=Member(id=null, username=张三, birthday=Sun Nov 11 00:00:00 CST 1990, gender=0)
读取Member=Member(id=null, username=王红, birthday=Thu Apr 29 00:00:00 CST 1999, gender=1)
读取Member=Member(id=null, username=李四, birthday=Thu Mar 09 00:00:00 CST 2000, gender=0)
读取Excel完毕
说明解析成功，并且在解析的过程中，进行了业务逻辑的处理。
小结
本篇文章基于SpringBoot集成EasyExcel的实现展开，为大家讲解了EasyExcel在实践中的具体运用。大家可根据需要，进行变通处理。同时，基于自定义转换器、自定义策略、自定义监听器等形式达到灵活适用于各种场景。希望本篇文章能给大家带来帮助。
博主简介：《SpringBoot技术内幕》技术图书作者，酷爱钻研技术，写技术干货文章。
公众号：「程序新视界」，博主的公众号，欢迎关注~
技术交流：请联系博主微信号：zhuan2quan
以上是关于empty来显示暂无数据简直太好用，阻止用户复制文本user-select的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot + EasyExcel导入导出，简直太好用了！
Spring Boot + EasyExcel导入导出，简直太好用了！
一套基于 SpringBoot 的完整高并发电商系统，拿去面试简直不要太好用！