最近在写项目时使用antd来作为组件库，但是需要更改默认样式，所以在一点点改写样式，遇到两个坑记录一下问题一：加了列宽不生效并且列名和列值不对齐的情况设置的列宽为110px但是并不生效解决办法：正确高列宽生效方法为设置scroll:x的值为列宽总和scroll={{
x: dataList.length > 0 ? 660 : false,
y: da
转载
2024-09-12 10:00:32
2242阅读
两种类型的表格布局
你有两种方式使用表格布局 -HTML Table(
HTML Table是指使用原生的
js 代码:
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
滚动条样式主要涉及到如下CSS属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%;
页面如果想实现滚动效果，首先想到的是overflow：auto或者scroll属性，但是这样会出现滚动条，如果想实现滚动效果，有没有滚动条的话，那么推荐使用better-scroll插件。 一、安装 在package.json里面加入better-scroll的依赖，然后使用npm安装。 npm install better-scroll –save-dev 二、引入better-scro
缘起标题有点夸张，并不是完全放弃antd-table，毕竟在react的生态圈里，对国人来说，比较好用的PC端组件库，也就antd了。即便经历了2018年圣诞彩蛋事件，antd的使用者也不仅不减，反而有所上升。客观地说，antd是开源的，UI设计得比较美观(甩出其他组件库一条街)，而且是蚂蚁金服的体验技术部(一堆p7,p8,p9，基本都是大牛级的)在持续地开发维护，质量可以信任。不过，antd虽好
转载
2024-02-22 13:09:20
2032阅读
一、原生要获取盒子（元素）的滚动条位置，可以使用JavaScript的scrollTop和scrollLeft属性。这些属性用于获取或设置元素的垂直和水平滚动条位置。下面是获取盒子滚动条位置的示例：// 获取盒子元素
var box = document.getElementById('myBox');
// 获取垂直滚动条位置
var scrollTop = box.scrollTop;
/
2021-1-6更新 针对评论出现的问题 1、 noresize="false"属性类型不符，加冒号绑定为动态属性 :noresize="false"。 2、代码不生效的问题，可能是没有设置高度导致，为<el-scrollbar /> 设置高度。在使用 vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚
转载
2024-05-07 18:52:00
2461阅读
前言前端页面性能对用户留存、用户直观体验有着重要影响，当页面加载时间超过 2 秒后，加载时间每增加一秒，就会有大量的用户流失，所以做好页面性能优化，无疑对网站来说是一个非常重要的步骤。那如何才能知道一个页面的性能情况呢？知道了页面性能情况后又如何进行优化呢？一个页面的性能指标非常多，面对一大堆性能指标，可能一个老手也一时间不知道从何开始分析。而且不同团队，负责的业务不同，性能分析的指标也不能够一概
内容ion-content改进此文档内容组件提供了一个易于使用的内容区域，并提供了一些有用的方法来控制可滚动区域。在一个视图组件中只应该有一个内容。如果需要其他可滚动元素，请使用ionScroll。内容区域还可以通过刷新组件来实现刷新 。用法<ion-content>
Add your content here!
</ion-content>要从页
简单介绍三个React组件吧。ImageTableFormReact-Image源码 Demo一个用于加载/预览图片的组件Image自动管理图片的loading和error状态, 并显示不同提示.通过IntersectionObserver来实现图片懒加载默认使用Preview来进行图片预览可以通过group来管理图片预览列表, 同一个group的图片会出现在预览列表中import { Image
前言有必要说明，这其实是一个很简单的功能，用原生实现也非常简单： #preview-zone {
overflow-y: auto;
overflow-x: hidden;
height: 90%;
width: 100%;
} overflow是CSS的原生属性，x和y分别代表水平和垂直方向的滚动条： CSS overflow ÊôÐÔwww.w3school.com.cn
转载
2024-09-06 15:59:47
229阅读
转载
2022-06-05 00:39:56
7762阅读
一. 页面结构页面的内容主要有三个板块：1.上面的搜索框部分(el-form部分)，2.中间展示内容的部分(el-table部分) ，3.下面的分页器部分(el-pagination部分)，代码结构如下：<el-form inline >
<el-form-item ></el-form-item>
...
</el-form>
<e
转载
2024-04-14 10:10:48
1047阅读
公司接了一个 Ant Design Pro 的项目，后台接口已经有了，需要搭建前端。因为是一个项目，所以这两个功能就一起讲了。后台接口：1、category_name（获取图片类型接口） 发送：无 接收：list（类型列表）2、upload(上传接口）： 发送：image_name（文件名）
文章目录AmisAmis 安装新增页面关于amis样式最终呈现界面自由的左边栏菜单,本地Json保存菜单数据从服务器加载 menu菜单项保存在本地Json进一步优化修改app.tsx添加版本号菜单图标umi request 的简单修改修改service里面的api.ts设计React里面使用的Amis组件创建amis组件Hook 方式的挂载事件useStateuseEffectuseEffect
真的是书到用时方恨少啊，出一篇文章真的是太难了，当然了，主要是自己太菜了！！那么，鉴于上一篇文章是内容超出以滚动的方式处理，但是有时候需求可能就是想要有滚动条样式，毕竟这样更直观一点，更有利于用户体验，所以这边文章咱们就说说如何使用css修改滚动条样式。（浏览器挺多的，主要说说Chrome和IE吧）Chrome首先咱们可以看看Chrome浏览器中滚动条都有哪些部分 ☟☟☟ 如图所示，Chrome主
转载
2023-10-09 14:44:42
581阅读
<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</
原创
2022-03-02 14:56:01
469阅读
# iOS滚动条样式修改教程
## 流程图
```mermaid
graph TD
A(开始) --> B(导入滚动条样式文件)
B --> C(设置滚动条样式)
C --> D(结束)
```
## 步骤说明
| 步骤 | 操作 | 代码示例 |
| ---- | ---- | -------- |
| 1 | 导入滚动条样式文件 | `#import ``#import ` |
| 2
原创
2023-10-04 06:56:50
118阅读
滚动条样式是当前浏览器的样式，以webkit内核为准。改的全局样式。不单单是elementUI样式 新建一个reset.scss // border-radius 圆角 /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; // ...
转载
2021-09-18 16:15:00
534阅读
2评论
纯css修改默认滚动条的样式 1 &::-webkit-scrollbar { 2 // 滚动条的背景 3 width: 16px; 4 background: #191a37; 5 height: 14px; 6 } 7 8 &::-webkit-scrollbar-track, 9 &::-we ...
转载
2021-10-11 09:42:00
378阅读
2评论
