ant design vue a-table横向滚动条不见了的处理方法

已于 2023-07-17 15:34:03 修改
阅读量2.2k 收藏 1
点赞数 2
文章标签： 前端框架 javascript vue.js 前端
于 2023-07-17 15:33:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SZHFCLXX/article/details/131767563
版权

在这里插入图片描述
在这里插入图片描述
给a-table加上所有列所配的width和xxx作为:scroll=“{x: xxx}”,即可
在这里插入图片描述
在这里插入图片描述

SZHFCLXX
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone https://github.com/vueComponent/ant-
vue-antdesign-admin-template：Ant Design Pro Vue模板
02-05
蚂蚁设计专业Vue模板 根据改造后的开箱即用的后台管理系统模板，优化了很多内容，更轻量，更简洁，可以在此模板上快速，便捷地去建造自己的后台项目。预览：| 优化：项目结构和文件夹命名，项目结构更加合理 优化：只保留基础的实例路由和页面，删除了其他页面 优化：顶部multiTab的样式，可跟随header固定 优化： 升级为最新的2.x 优化：打包配置，可根据不同打包环境输出不同目录 优化：multiTab快捷呼出交菜单可选范围覆盖到整个选项卡 优化：切换路由的效果，并提供了两个切换效果 补充：配置打包分析和快速lint-ifx命令 新增：变量可用的less变量 新增：权限控制是否开启的配置 补充
antd-vue中table组件的:scroll=“{x:true}“失效的问题
修仙程序员的博客
11-24 3912
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
el-table横向滚动条不显示
找师父的小白的博客
05-16 2433
在Vue中使用el-table，设置表格高度和宽度后，表格内容超出，横向滚动条没有显示，无法拖动。
vue+antd Table控制多个table横向滚动条同时滚动
qq_40853132的博客
11-08 2371
vue+antd Table控制多个table横向滚动条同时滚动
html页面中 想要table超出宽度下方出现横向滚动条 数据少时制动适应宽度平均分剩下宽度
qq_39598092的博客
11-04 1325
最开始只写了 最大值max-width和最小值min-width 但是怎么弄页面只有3列数据的时候宽度就是153px；后来加了一个width：100%；就数据少的时候就自适应宽度了 数据少的时候 显示 ...
antd table 固定列之后滚动条无法拖动
weixin_45653441的博客
07-27 2269
使用a-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动。解决方法将固定区域底部留出一个滚动条高度的距离。主要的问题就是固定区域盖住了横向滚动条。设置bottom值，使得不盖住滚动条。可以使用下面配置来解决。...
a-table设置滚动条以及数据内容过多省略号显示鼠标悬浮显示全部内容
weixin_48907405的博客
04-20 3395
加上滚动条后，数据过长就会导致行高撑开那么在样式里面添加以下几项。
关于antdv表格a-table设置scroll属性后表格行错位解决方案
热门推荐
cabinx的博客
01-15 1万+
antdv表格a-table设置scroll属性后表格行错位解决方案 1.需求背景 最近开发财务项目中使用到了UI框架antdv，使用a-table后需要设置表格一屏显示，即表格内容超过了屏幕之后显示滚动条，但是表格行内容出现错位。 解决方案 1.先设置a-table的scroll属性，如下： <a-table ref="table" size="small" rowKey="id" :columns="columns"
Ant Design vue 组件table 水平和垂直滚动条
qq_43689775的博客
04-21 2589
Ant Design vue 组件table 水平和垂直滚动条
ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果
qq_47648083的博客
04-17 2695
鼠标移入滚动条停止滚动，鼠标移出滚动条继续滚动。
AntD Vue中a-table的使用
浪潮行舟_chenjin2136
02-15 2953
最近在一个后台管理系统中用到AntD，其中对表格用的比较多。对常见的表格处理进行简要总结
用于设置ant-design-vue中table组件的列宽可拖拽
最新发布
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant design vue 表格table 默认勾选几项的操作
01-22
为什么我同样的功能要用react 、vue 都写一遍 ？ 啊我真是不是闲的蛋疼啊(～ o ～)~zZ 在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: '
ant-design-vue-table：蚂蚁设计-vue表
02-14
我的项目项目设置yarn install编译和热重装以进行开发yarn run serve编译并最小化生产yarn run build运行测试yarn run test整理和修复文件yarn run lint自定义配置请参阅。
antd 表格 固定列 设置 横向滚动条，常用于列比较多的情况
业余前端的职业经历
05-17 8228
table表格展示，在后台中用的特别多，当一些列特别多的情况下， 就需要我们用固定列的方式进行展示，然后 横向滚动条 对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用 注意要配合 scroll.x 进行使用哈，否则就算是你固定了 也不会出现滚动 条 const columns = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fi
【a-table表格内容移动表头不跟随移动的解决方案】
Alice_LiLi的博客
09-16 4066
1、在colums中给每个列头加上宽度，width：xxx。问题1：当表格需要呈现的内容过多，溢出表格本身的宽度。增加scroll滚动条。
ant-design-vue的a-table组件空状态滚动条位置移动（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-13 1085
a-table组件，判断当前table的表格数据是否为空，为空添加当前的类名即可。
Table 表格 下面滚动条自适应
m0_61749828的博客
04-28 2349
一、说明： 首先，用到的是table自带的API【:scroll="{ x: 1300,y: 400 }"】 其中x指横轴滚动条设置，这里主要说的是y轴，以上API 可以理解为表格内容区高度固定为400px，多出的将以滚动条的形式展现。 首先，在vue代码的data中设置一个变量，用于获取当前屏幕的高度，如： data() { return { windowHeight: document.documentElement.clientHeight, //实时屏.
AntdesignVue a-table禁用特定的单元格
07-13
要禁用 Ant Design Vue 表格（a-table）中的特定单元格，您可以使用 `customRender` 属性来自定义单元格的渲染方式。通过在自定义渲染函数中添加逻辑，您可以控制单元格是否可编辑或禁用。 下面是一个示例，演示如何禁用特定单元格： ```vue <template> <a-table :data-source="dataSource"> <a-table-column title="Name" dataIndex="name" customRender="nameRender"></a-table-column> <a-table-column title="Age" dataIndex="age" customRender="ageRender"></a-table-column> </a-table> </template> <script> export default { data() { return { dataSource: [ { name: 'John', age: 30, editable: true }, { name: 'Jane', age: 25, editable: false }, ], }; }, methods: { nameRender(text, record, index) { return { children: <span>{{ text }}</span>, attrs: { // 根据 editable 属性来判断是否禁用单元格 disabled: !record.editable, }, }; }, ageRender(text, record, index) { return { children: <span>{{ text }}</span>, attrs: { // 根据 editable 属性来判断是否禁用单元格 disabled: !record.editable, }, }; }, }, }; </script> ``` 在上面的示例中，我们定义了一个 `dataSource` 数组，其中包含两个对象，每个对象代表一行数据。在 `nameRender` 和 `ageRender` 函数中，我们使用 `customRender` 属性来自定义单元格的渲染方式。根据 `editable` 属性的值，我们决定是否禁用单元格。 请注意，上述示例中的 `customRender` 函数使用了 Vue 的 JSX 语法。如果您不熟悉 JSX，您也可以使用普通的模板语法来实现相同的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值