empty来显示暂无数据简直太好用，阻止用户复制文本user-select
element-ui表格某一列无数据显示--
很多时候，表格的某一列可能是没有数据的。
空着了不好看，ui小姐姐会说显示 --
这个时候，小伙伴是怎么做的呢？
使用循环来判断是否为空，然后赋值为--
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</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这个属性的运用场景
这个属性主要是用在阻止用户去复制文本内容，
现在很多特殊场景可能不允许赋值，
特别是网站答题场景、某些信息保密场景、付费场景。
empty来显示暂无数据简直太好用，阻止用户复制文本user-select的更多相关文章
- element table 先显示暂无数据 之后再加载数据 问题
项目中的表格请求数据时,进去页面,先出现 ''暂无数据'' 字样闪现一下之后在进行加载数据,用户体验十分不好 解决办法: <template> <el-table :data=&qu ...
- Repeater 控件 当数据源没有数据的时候显示 暂无数据 的两种方式
第一种:现在前台给Repeater控件外面的div加一个runat=”server” 然后在cs后台判断数据源是否为空, 是的话就修改这个前台div的InnerText或者是InnerHtml 即可 ...
- Repeater在无数据记录时显示暂无数据
原文:Repeater在无数据记录时显示暂无数据 方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <Footer ...
- 使用Vue封装暂无数据占位图组件
1. 前言 在日常开发中,页面上肯定有展示数据的需求,但是当某些时候该展示数据的地方此时数据为空时,就会留下一片空白,对用户体验不是很好,那么接下来我们就封装一个空数据时的占位展示图,告诉用户此时用户 ...
- element el-tree、el-table组件加载数据前闪现 暂无数据 清除
相信很多人在使用element el-tree.el-table组件加载数据前会显示一个" 暂无数据 ",体验很不友好,有没有办法处理不显示呢?答案是:有的.废话不多说直接上代码 ...
- Repeater为空时显示“暂无数据”，很方便实用方法
Repeater为空时显示“暂无数据”,很方便实用方法 <FooterTemplate> <asp:Label ID="lblEmptyZP" Text=&q ...
- 使用约束给tableview添加暂无数据的提示
在tableview没有数据的时候,我们经常需要在tableview的正中间插入一张图片,来提示用户暂无数据 /** * 添加一个view,提示暂无数据 */ - (void)addPromptVie ...
- m2014-architecture-imgserver->Lighttpd +mod_mem_cache的效果简直太好了
公司的图片服务器一直以来负载都比较高,原因是图片比较分散而且比较小.经常把iowait搞的特别的高.但是只有一台机器也法用squid,经测试squid和apache在同一台机器效果会很糟糕的.因为sq ...
- android studio 调试技巧（简直太好用）
android studio 调试技巧(简直太好用) 说到android studio的调试,很多人可能会说,这有什么可讲的不就是一个断点调试么,刚开始我也是这么认为的,直到我了解之后,才发现,调试原 ...
- （转）Repeater在无数据记录时显示暂无数据
方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <FooterTemplate> <asp: ...
随机推荐
- TML转义字符：xss攻击与HTML字符的转义和反转义
xss与转义符 xss简单来说: XSS 攻击是页面被注入了恶意的代码 XSS 漏洞是 可以让攻击者注入恶意代码可执行的漏洞 具体参看之前写的: web开发前端安全问题总结--web前端安全问题汇总 ...
- 关于 DataLeap 中的 Notebook，你想知道的都在这
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 DataLeap 是火山引擎数智平台 VeDI 旗下的大数据研发治理套件产品,帮助用户快速完成数据集成.开发.运维 ...
- Codeforces Round 908 (Div. 2)
总结 T1 题目大意: A,B两人玩游戏,游戏规则如下: 整场游戏有多轮,每轮游戏先胜 \(X\) 局的人获胜,每场游戏先胜 \(Y\) 局的人获胜. 你在场边观看了比赛,但是你忘记了 \(x\) 和 ...
- python像操作文件一样操作内存的模块 StringIO
io流(io stream) 流是一种抽象概念,它代表了数据的无结构化传递.按照流的方式进行输入输出,数据被当成无结构的字节序或字符序列.从流中取得数据的操作称为提取操作,而向流中添加数据的操作称为插 ...
- RocketMQ事务消息在订单创建和库存扣减的使用
前言 下单的过程包括订单创建,还有库存的扣减,为提高系统的性能,将库存放在redis扣减,则会涉及到Mysql和redis之间的数据同步,其中,这个过程还涉及到,必须是订单创建成功才进行库存的扣减操作 ...
- 打破虚拟边界的视频交互新方式，AR隔空书写的应用理念和探索实践
AR隔空书写演示 随着技术的发展和超视频化的时代驱动,交互的形式日渐丰富.从屏幕点触,到语音交互,人脸.指纹.声纹,再到近年流行的AR和VR--人类早在语言出现之前便习惯使用肢体和手势这种近乎本能的沟 ...
- Codeforces Round #736 (Div. 2) A~D
比赛链接:Here 1549A. Gregor and Cryptography 不难,观察一下就容易得知要想使得 \(p\pmod a = p\pmod b\) 令 \(a = 2,b=p - 1\ ...
- AISing Programming Contest 2021（AtCoder Beginner Contest 202） 简单题解记录
补题链接:Here A - Three Dice 水题,问给定三次摇色子的正面,请问3次结果以后相对面的点数和 cout << (21 - a - b - c) << &quo ...
- HHKB Programming Contest 2020 补题记录（D题投影，E题预处理节省时间）
补题链接:Here A - Keyboard 签到,S 为 Y 则输出大写 T,不然则原样输出 T int main() { ios_base::sync_with_stdio(false), cin ...
- vue学习笔记 十八、父子组件相互传递参数
系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...