vben admin（ant-design-vue2 + vue3）表格实现列拉伸

最新推荐文章于 2023-06-01 17:16:51 发布
最新推荐文章于 2023-06-01 17:16:51 发布
阅读量1.6k 收藏 9
点赞数 6
分类专栏： 记录踩坑 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miyunie3964/article/details/127633959
版权

vben admin（ant-design-vue2 + vue3）表格实现列拉伸

基于vben admin实现table表格列拖拽拉伸的功能

背景

公司项目中使用了vben admin作为后台管理系统的框架，但是ant-design-vue2的表格没有列拖拽的属性，直接引入vue3-draggable-resizable后，发现表格鼠标效果出现，但是拖动时表格列宽度没有改变

第一步

首先在项目中安装引入vue3-draggable-resizable插件，我是参考的以下链接引入的
参考引入方式

第二步

在useColumns中返回columnsRef
在这里插入图片描述

修改BasicTable.vue中参考第一步中引入方式引入的代码：
在这里插入图片描述
此时表格列宽度已经可以拖动。

bug

上述方式只能解决表格没有操作项时的列拖动，如果表格有操作项时也会改变列宽，但是拖拽感觉有延迟效果，类似卡顿，并不完美，目前还没有找到解决方式，希望解决了的伙伴们可以告诉我一下。

TianLanLan3
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue-vben-admin:基于Vite2，vue3.0，ant-design-vue 2.x，打字稿，vuex，vue-router的vue3样式管理员，正在努力进行更新。
05-12
Vue vben管理员 English | 介绍 Vue Vben Admin是一个免费的开源中端和后端模板。 使用最新的vue3 ， vite2 ， TypeScript和其他主流技术开发，开箱即用的中端和后端前端解决方案也可用于学习参考。 特征 最新技术发展水平：使用诸如Vue3 / vite2之类的前端前端技术开发 TypeScript ：应用程序级JavaScript语言 主题：可配置的主题 国际：内置完整的国际化程序 模拟服务器内置模拟数据方案 权限内置完整的动态路由权限生成方案。 组件多个常用组件被封装两次 预览 完整版中文网站 完整版本的github站点 简体中文网站 pages-简化的github网站 测试帐号：vben / 123456 使用Gitpod 在Gitpod（适用于GitHub的免费在线开发环境）中打开项目，并立即开始编码。 文献资料 准备 和项目开发环
vben admin Table 实现表格列宽自由拖拽
小菜鸡的博客
01-15 755
最后TIPS:样式生效，但是如果表格列有排序，排序的触发事件放在表头的，所以拖动会触发本列的排序事件。第三步：找到Table组件中的useColumns.ts文件，将columnsRef抛出。第4步：在BasicTable组件中，引入第二步的文件，并配置在表格头的cell中。第二步：在列表中插入useTableHeadResizable.ts文件。另：仅有当column项的宽设了值后，才可以拖动宽的长短。一就是用鼠标右键进行拖动，避免触发click。二就是将排序的触发事件绑定在排序icon上。
实战SpringBoot2+Vue3-Vben-Admin整合之前端篇
05-14
【※  购买前提醒  ※】本课程分为前端+后端共计2个课程，本课属于前端部分，后端属于另外课程。 后端部分：https://download.csdn.net/course/detail/37057适用人群Java生态开发人员、Vue生态开发人员、IT类从业者课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue3-Vben-Admin+可视化等技术栈开发的项目，采用多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术 说明Spring Boot2 MVC框架 开发的一站式解决方案Spring Security5  认证和授权框架MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架MyBatisCode工具 生成 MyBatis 相关代码Jackson 提供了处理 JSON 数据的工具Lombok 简化对象封装工具 Druid   数据库连接池 【前端技术】Vue        互联网最火的前端框架Vue Router 路由框架Vuex 全局状态管理框架Axios 前端 HTTP 框架Vue-Vben-AdminI 前端 UI 框架 前端模板【开发工具】IntelliJ IDEA 开发 IDESQLyog 数据库连接客户端Postman HTTP 请求工具【开发环境】工具 版本JDK 1.8MySQL 5.7
Vben-admin表单列宽自适应
weixin_43891918的博客
04-30 1240
Vben-admin表格BasicTable实现列宽自适应
vben admin BasicTable 表格的进阶使用之带搜索区域以及对于 useTable 中方法使用别名
YZRHANYU的博客
03-15 5663
vben admin BasicTable 表格的进阶使用之带搜索区域以及对于 useTable 中方法使用别名
vben admin 2.路由权限、前置守卫循环重定向死循环问题
郝开的博客
05-25 3459
vben admin 路由权限、前置守卫循环重定向死循环问题vue导航守卫vue路由权限全局前置守卫使用方法vue Router 方法 addRoutevben admin搜索addRoute定位路由文件setupRouterGuardcreatePermissionGuardrouter.beforeEach前置守卫白名单的作用：避免前置守卫循环重定向导致死循环router.addRoute添加路由权限getMenuList()获取菜单 vue路由权限思路都是基于导航守卫，然后addRoute添加权限去做
使用ant design vue中a-table实现自定义列拖拽 以及解决列拖拽时表格大小跟着变化的问题
defined_的博客
06-01 2391
@resizeColumn="handleResizeColumn" 设置列拖拽方法 handleResizeColumn是拖拽时调用的函数 当isHidden为true时 为div加上table_hidden的样式 即超出部分隐藏 这样拖拽时跟着移动的表格部分就会被隐藏了
vue-vben-admin：基于Vite2，vue3.0，ant-design-vue 2.x，打字稿的vue3样式Admin，正在努力进行更新。
02-06
该项目是基于'ant设计-VUE实施vue3风格的后台管理系统,打字稿, vue3.0 ,维生素E , tsx`， 的GitHub main分支 瘦 预习 测试帐户：vben / 123456 文献资料 2.0的文档尚未开始，将在以后提供。 预安装 环境要求 Node....
基于 Vue3、Vite、Ant-Design-Vue大数据开发案例
最新发布
04-11
基于 Vue3、Vite、Ant-Design-Vue、TypeScript、Vue Vben Admin，最先进的技术栈，让初学者能够更快的入门并投入到团队开发中去。包括模块如：组织机构、角色用户、菜单授权、数据权限、系统参数等。强大的组件封装...
vben-mini:用于vue2.0和vue3.0的学习vue-vben-admin的迷你vben
04-16
Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得语法的正确IDE支持，请使用而不是Vetur（并禁用Vetur）。 TS中.vue导入的类型支持 由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具类型（例如，在使用手动h(...)调用时获取道具验证），则可以使用以下代码： 如果使用手掌 运行Volar: Switch TS Plug
vue后台管理项目左菜单栏伸缩-影响右侧内容宽度（可变宽不能缩小）
devin_csdn的博客
04-14 6171
我们使用vue做后台管理时候，使用flex布局，el-menu左侧菜单栏有一定宽度，右侧路由出口router-view展示内容。内容区域样式设置flex=1就可以自适应了。 问题：当左侧菜单栏缩进时，右侧内容自适应，宽度会变宽，el-table的style=100% table也会变宽 再当左侧菜单栏伸展出来时，右侧内容就会超出视口宽度。 这时右侧内容宽度超出了视口，并出现了滚动条 ，其实你将窗口放大左侧内容也会变宽，但是再缩小时却不会随着缩小，出现同样的问题。 解决方法： 给右侧内容..
vben admin的useTable 增加表格拖拽功能
weixin_44864019的博客
05-17 2570
由于项目vben admin的 vue antd的版本是2.2.8，在看了table的文档之后发现只有用Surely vue才支持封装好的拖拽功能。只有自己动手去实现vben里的useTable的拖拽功能了 在useTable的配置项里面添加customRow的属性，然后定义一个函数： 定义的dateSource必须用reactive包裹起来，否则在页面不能看到拖拽的变化。 let source= 0; // 源目标数据序号 let target= 0; // 目..
Vue-Vben-Admin-一个使用composition-api+ts的后台系统
热门推荐
ann的博客
07-24 3万+
VUE VBEN ADMIN 介绍 vue-vben-admin 是一个全新的开源系统,基于ant-design-vue,typescript,@vue/composition-api,tsx实现的 vue3 风格的后台管理系统，让您提前学习vue3+ts带来的体验。适合中大型项目的开发，实际开发中可以直接使用。 兼容 vue2 的浏览器，一切免费，不收取任何费用，请放心使用。后续定期提供更新及维护，可供参考与学习， 预览 vue-vben-admin-预览 仓库 gitHub ...
Vben Admin 自学记录 —— Table组件的基本使用及练习（持续更新中...）
qq_36842789的博客
05-06 3793
对 antv 的 table 组件进行封装。
iview-admin 之 table 动态表分页查询
u012453032的博客
11-29 2413
(1) 创建 common-table.vue <style lang="less"> @import '../../styles/common.less'; @import './components/table.less'; </style> <template> <div> <Table :column...
Vue-Vben-Admin在哪里对BasicTable表格做了默认列宽均分的处理，具体代码在哪里？ant-design-vue在哪里为table表格做了列宽自适应处理
04-29
关于Vue-Vben-Admin的BasicTable表格默认列宽均分的处理，具体代码位于/src/components/Table/BasicTable.vue文件中的第69-72行： ```javascript data() { return { // 列宽 columnWidth: 100 / this.columns.length + '%' } }, ``` 这里通过计算表格列数，将每列宽度设置为100%除以列数的结果，从而实现默认列宽均分的效果。 关于ant-design-vue的table表格列宽自适应处理，Ant Design Vue提供了一个属性`ellpisis`（是否单行省略），当表格内容过长时，会自动省略显示，并在省略处显示省略号。如果需要自适应列宽，可以设置`width`属性为`auto`。具体代码如下： ```html <a-table :columns="columns" :data-source="data" bordered> <template #name="{ text }"> <span :title="text">{{ text }}</span> </template> <a-table-column title="Name" dataIndex="name" width="auto" /> <a-table-column title="Age" dataIndex="age" width="auto" /> <a-table-column title="Address" dataIndex="address" width="auto" /> </a-table> ``` 这里通过将列的宽度设置为`auto`，让表格自适应内容的宽度。同时，在模板中使用`title`属性来显示完整内容，以便在鼠标悬停时显示完整内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值