【ant design vue的table设置scroll后出现滚动条的隐藏处理】

这篇具有很好参考价值的文章主要介绍了【ant design vue的table设置scroll后出现滚动条的隐藏处理】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当table列表内容需要y轴方向滚动时,我们添加并设置了scroll值,例如下:

<a-table
    :columns="columns"
    :data-source="columnsList"
    :pagination="false"
    :scrollToFirstRowOnChange="true"
    :scroll="{x: 945, y: 290}"
    >

效果如下:
antd table 隐藏滚动条,vue.js,javascript,前端
此时,列表的表头及列表的底部(:scroll中不设置x,底部的滚动条也不会出现)也出现了滚动条,表格看起来不简洁,可以在css添加以下样式:

// 隐藏表头的滚动条
	/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
   			overflow: hidden !important;
    		margin-bottom: 0 !important;
				}
//隐藏表格底部横向滚动条
	/deep/.ant-table-body {
			overflow-x: hidden !important;
 			}

效果如下:
antd table 隐藏滚动条,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-567204.html

到了这里,关于【ant design vue的table设置scroll后出现滚动条的隐藏处理】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ant Design Vue Table 嵌套子表格的数据刷新方法

    父子组件各自负责,在table中嵌套了子表格后,首次加载表格时,父组件会实例化子组件并传递参数,折叠后再次展开时,只会传递参数,子组件的数据刷新就属于子表格了。如 @@@code template #expandedRowRender=\\\"{ record }\\\" originIndex style= \\\"margin-left: 55px; margin-right: 50px; background-color:

    2024年02月09日
    浏览(30)
  • vue | element-ui中 如何修改表格Table组件中滚动条的样式

    在Table表格中,当内容超出容器时就会出现滚动条,elemnt-ui自带的滚动条有时无法满足需求,那么我们可以通过css伪类来实现对滚动条的自定义。 滚动条由两部分组成的: 滑块:可以滑动的部分。 轨道:滚动条的轨道,即滑块的轨道。一般来说滑块的颜色比轨道的颜色深一

    2024年02月11日
    浏览(43)
  • [ant-design-vue] table组件列宽拖拽功能

    原有的样式文件没有使用的必要,个人添加的部分样式内容就符合需求了 vue3.x对应的ant-design-vue中的table组件本身支持列宽的拖动了,不需求额外的包的支持,根据Api说明设置resizeColumn即可

    2024年01月23日
    浏览(41)
  • Vue 3 中 Ant Design Vue 如何自定义表格 Table 的表头(列头)内容?

    项目用到的是 Ant Design Vue (2.2.8) 组件库,开发中遇到一个如下图的表格,有些表头文本后面会有一些自定义图标,鼠标移入图标时显示对应的审批时间提示。当前列如果没有审批时间就会隐藏图标,只展示列头文本。 使用 Ant Design Vue 基础的 Table 组件是无法满足这个场景的

    2024年02月16日
    浏览(39)
  • ant-design-vue的table表格行合并和列合并

    场景说明: 1、列合并:需要在表格最后一列进行合并,如图: 思路:相当于是第二列的最后一栏(colSpan )占比5列,第2列后面的4列最后一行(colSpan )占比0。 代码示例 行合并需求如图:将指定列的多行合并成一行 思路:和合并列差不多;第一列的第一行和第二行要合并

    2024年02月16日
    浏览(32)
  • 保姆级教程:Ant Design Vue中 a-table 嵌套子表格

    前端为Ant Design Vue 版本为1.6.2,使用的是vue2 Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码 下图为官网图,会在每行最前面多一个加号,点击后会展开,看到子表格的数据 子格嵌套从代码层简

    2024年02月01日
    浏览(48)
  • vue的h渲染函数和customRender在ant design vue的table组件的使用

    使用ant design vue 的table组件,没有使用插槽的情况下,我想你给我使用tooltip,这样子我就不用又写插槽又写html结构了 因为我们使用table组件,想自定义结构,一般是先使用插槽,然后插槽填写内容,比如下面做法 这个时候我们可以使用组件列表 columns 说明的 customRender 属性来简化这一

    2024年02月13日
    浏览(35)
  • Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法详解

    在使用 Ant Design Vue 开发时,有时需要将 Table 表格中的数字类型字段转换为对应的文字表示,以提供更直观的数据展示。本文将详细介绍在 Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法,帮助您灵活地处理数据展示需求。 在实际的应用中,我们经常会遇到需要将

    2024年02月11日
    浏览(35)
  • 【ant-design-vue】实现table的拖拽排序(拖拽行和伸缩列):

    1.效果: 拖拽前: 拖拽后: 2.实现: 3.出现的问题: 4.初始拖拽版本: 5.相关知识:

    2024年02月12日
    浏览(33)
  • ant-design-vue中table组件使用customRender渲染v-html

    ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用,但是使用v-html发现不生效还报错 2、customRender函数返回肯定是jsx语法,于是发现这样写可以

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包