elementUI table手动实现列宽改变数据绑定解决思路参考

简介: element UI table文档:http://element-cn.eleme.io/#/zh-CN/component/table#table-events根据文档我们发现可以通过header-dragend事件来获取列...
img_7a5af4becde195a51c84729710d62407.gif

element UI table文档:http://element-cn.eleme.io/#/zh-CN/component/table#table-events

  • 根据文档我们发现可以通过header-dragend事件来获取列宽改变的一些信息

    img_f4dc9daefa13b45306b0a1aef7f54bea.png

  • 添加测试函数


    img_0c59ec7f73b8d27f2f9c55ebf355452f.png
    网页

    img_7b6a9fd458c5e4115d183115878fd3f1.png
    Vue data

    img_c03ee177f65ad1df34a819c6fb598b5b.png
    Vue methods
  • 事件测试


    img_7e6696fcba2098ee20f233ad0432295a.png
    默认宽度

    img_c3393c720d78020b7b5f05939ec09e38.png
    事件获取的数据

    img_d95e6ee7feaa0a79164eab7ba0580f62.png
    找到标识信息
  • 修改测试函数


    img_dedf3f3932de7f997eb877eabd99c57b.png
    test
  • 最终效果


    img_211f0d554cd27304e1d5af181279c448.png
img_b3707602db75a4bab01a76fa9f75af71.gif
相关文章
|
JavaScript
VUE element-ui之table表格横向展示(表尾汇总)
VUE element-ui之table表格横向展示(表尾汇总)
1571 0
VUE element-ui之table表格横向展示(表尾汇总)
|
1月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
34 0
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue 中,表格组件是使用频率及复杂度排名第一的组件,前端经常需要根据后台返回的数据动态渲染表格,比如动态表格如何生成,因为表格的列并不是固定的,在未知表格具体有哪些列的场景下,前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理,比如第一列是日期,需要把相同的日期进行合并,这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即
3093 0
|
6月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
375 1
|
6月前
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
928 0
VUE element-ui之table表格内容样式(颜色)修改
|
JavaScript
【项目经验】elementui--table表格自定义表头及bug
elementui--table表格自定义表头及bug(避坑)
265 0
|
前端开发
layui使用table组件实现排序的CSS样式调整解决方案
layui使用table组件实现排序的CSS样式调整解决方案
256 0
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
248 0
|
JavaScript
vue怎么实现element表格里表头信息提示功能?
vue怎么实现element表格里表头信息提示功能?
303 0
vue怎么实现element表格里表头信息提示功能?