vue表格拖动改变列宽

最新推荐文章于 2024-04-09 14:11:48 发布
最新推荐文章于 2024-04-09 14:11:48 发布
阅读量1.6k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenzhengjiayou/article/details/126580504
版权

项目场景：

项目场景：vue2+antd框架，实现表格拖动改变列宽

问题描述

表格数据过多时，通过改变列宽实现展示完整数据的需求

 

解决方案：

1，vue-draggable-resizable

链接：https://www.cnblogs.com/wangRong-smile/articles/14841027.html

该方案原理：监听鼠标拖动事件，js手工写入虚拟dom（dom上更改css属性），属于最耗性能的动画，缺陷是真的很卡，不是推荐

2，vxe-table 

官方文档：vxe-table v3

该方案原理：拖动时不实时更新，松开鼠标才会渲染新的视图。根据文档注意使用版本就行

wenzhengjiayou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
elemetui自定义表格实现可拖拽列、显示隐藏列、数据汇总、自适应宽度
m0_62095536的博客
09-21 2692
给每一列添加这个代码如果只是想在某一列添加可以这样，宽度自定义方法如下：注意如果那一列的数据存在某一个是空值那么那一项就会不进入自适应宽度，把下面的注释掉就可以了；// 自适应表格列宽// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。if (!
table实现列宽的拖动效果
05-04
NULL 博文链接：https://jifeng3321.iteye.com/blog/2403674
vxe-table vue table 表格组件功能
01-21
一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格 例子 <template> <div> <vxe ref=xTable data.sync=tableData> <vxe-ta
antdesign vue中table表头列的拖拽和列宽的拖拽
最新发布
weixin_48447589的博客
04-09 903
写项目时遇到一个需求就是表头是可以拖动换位置的，并且需要用户手动拖拽设置宽度，我的项目用的是vue+antdesign vue实现的。这样就可以实现整列的位置拖拽了，你要是想这两个需求同时实现的话，就把他下载一起就可以了，引入import Sortable from 'sortablejs';实现一整列的位置拖拽就得依靠插件来实现了。先下载sortablejs。
vue table表格的封装和使用
09-01
1、该封装的组件包含分页、反选、多选、过滤、排序、树形数据懒加载、单元格绑定事件、行绑定事件、指定行添加背景色等功能，这些功能可以自动控制是否显示； 2、控制列的显示隐藏、表格的高度根据窗口大小自动改变、动态设置列宽； 3、使用slot，灵活修改列的显示，例如通过标签或者输入框显示； 4、组件可以直接使用，使用简单，方便，有使用示例和注释，上手快； 5、经过多个项目使用，功能稳定； 6、遇到使用问题可以随时帮助解答。
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向现代浏览器，高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能 功能： Basic table （基础表格） Grid （高级表格） Size （尺寸） Striped （斑马线条纹） Table with border （带边框） Cell style （单元格样式） Column resizable （列宽拖动） Maximum table height （最大高度） Resize height and width （响应式宽高） Fixed column （固定列） Grouping table head （表头分组） Highlight row and column （高亮行、列) Table sequence （序号) Radio （单选) Checkbox （多选） Sorting （排序） Filter （筛选） Rowspan and colspan （合并行或列） Footer summary （表尾合计） Import （导入) Export （导出) Print （打印) Show/Hide column （显示/隐藏列） Loading （加载中） Formatted content （格式化内容） Custom template （自定义模板） Context menu（快捷菜单） Virtual Scroller（虚拟滚动） Expandable row （展开行） Pager（分页） Form（表单） Toolbar（工具栏） Tree table （树形表格) Editable CRUD（增删改查) Validate（数据校验） Data Proxy（数据代理） Keyboard navigation（键盘导航） Modal window（模态窗口） Charts（图表工具）   更新日志： v2.10.22 修复已知问题
Vue3 实现elementPlus的table列宽调整和拖拽
一名业余前端的博客
11-23 2774
使用sortablejs在vue3中实现对elementPlus的table组件列宽度调整和列拖拽
Table 列宽拖动
04-27
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
vxe-table实现表格行拖拽
鑫仔的博客
10-12 5385
【代码】vxe-table实现表格行拖拽。
[ant-design-vue] table组件列宽拖拽功能
前端
03-04 2539
[ant-design-vue] table组件列宽拖拽功能vue2.x 拖动table组件列宽功能环境信息相关代码vue3.x 拖动table组件列宽功能环境信息相关代码 vue2.x 拖动table组件列宽功能 环境信息 "ant-design-vue": "^1.7.1", "vue": "^2.6.11", "vue-draggable-resizable": "^2.2.0", 相关代码 <template> <a-table :columns=
vue 表格左右拖拽调整列宽_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
weixin_42519781的博客
02-05 617
mounted() {// 在mounted中监听表格scroll事件this.$refs.scrollTable.addEventListener( 'scroll',(event) => {this.adjustTable(event);});},......// target中的属性很多，可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度adjustTable...
vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现
05-16
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
el-table中表格宽度设置
wjs_007的博客
08-01 1万+
大家好，我是小白学编程。最近在工作中遇到一个功能，页面上有表格展示，其实是一个再很简单不过的功能实现了，但是，有时候会遇到尴尬的情况，就是列数量比较尴尬，差不多可以拉伸整屏；差不多会在右侧流出点空白；差不多刚好多出一块，要么出现横向滚动条，要么某一列比较挤。像这种问题，也是很常见的，而且，在不同分辨率或不同放大倍数的电脑上展示时会出现不同的结果。根据自己遇到的情况和处理的方式，总结了一下几种处理方式。
vue3 elmentPlus table实现列宽可拖拽
云雨之石的博客
08-17 3414
vue3 elementPlus table实现列宽可拖拽
【vue】ElementUI el-table自适应列宽实现
热门推荐
coralime的博客
03-15 4万+
【背景小记】 el-table的el-table-column如果不指定width的话，会自动设定一个宽度，表格内容会自动换行，对强迫症用户来说非常不友好，为了追求完美用户体验，所以这里需要实现两个效果： 1. 强制表格内容不换行显示 2. 实现表格列宽自适应撑开 【代码实现】 <template> <el-table ref="tableRef" v-loading="loading" :data="tableDat
vxe-table 实现拖动行。列
weixin_41807530的博客
03-03 3035
实现表格行拖拽，列拖拽
af-table-column插件的使用 element el-table-column宽度自适应
qq_25741071的博客
09-08 761
以上就是 af-table-column 的基本使用方法。你可以根据自己的需求，自定义列的样式和行为。更多详细的使用方法和属性，请参考 af-table-column 的文档。af-table-column 是一个用于 Vue.js 的表格列组件，用于在表格中定义列的样式和行为。
vue vxe-tabel表格拖拽排序
weixin_51000565的博客
12-06 2471
vue vex-tabel 表格实现拖拽排序
vxetable 表格列宽可以自定义拖拽怎么实现
03-02
在 `vxetable` 中，实现表格列宽可以自定义拖拽的方式，可以通过配置 `column-resizing` 属性来实现。 具体来说，你需要在 `columns` 属性中为每一列设置 `resizable: true`，以指示该列可以进行列宽调整。然后，在 `tableProps` 属性中，你可以将 `column-resizing` 属性设置为一个对象，该对象包含一个 `handleWidth` 属性（可选），以指定列调整的手柄宽度，和一个 `minWidth` 属性（可选），以指定列的最小宽度。 例如，下面是一个实现了自定义拖拽表格列宽的 `vxetable` 示例代码： ```vue <template> <vxe-table :data="tableData" :columns="tableColumns" :table-props="tableProps" /> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 22, gender: 'Male' }, { name: 'Jane', age: 30, gender: 'Female' }, { name: 'Bob', age: 45, gender: 'Male' } ], tableColumns: [ { field: 'name', title: 'Name', resizable: true }, { field: 'age', title: 'Age', resizable: true }, { field: 'gender', title: 'Gender', resizable: true } ], tableProps: { columnResizing: { handleWidth: 5, minWidth: 50 } } } } } </script> ``` 在上面的代码中，`tableData` 和 `tableColumns` 分别是表格的数据和列定义，其中每一列都设置了 `resizable: true`，以允许列宽调整。在 `tableProps` 中，我们将 `column-resizing` 设置为一个对象，其中 `handleWidth` 属性设置为 `5`，以指定列调整的手柄宽度为 `5px`，并将 `minWidth` 属性设置为 `50`，以指定列的最小宽度为 `50px`。 这样，在 `vxetable` 中，你就可以通过简单的配置实现表格列宽可以自定义拖拽了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值