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
相关文章
|
5天前
|
JavaScript
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
15 1
|
12天前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
15 1
|
4月前
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
|
7月前
|
JavaScript
vue利用计算属性做(展开收起)(整理)
vue利用计算属性做(展开收起)(整理)
|
7月前
|
JavaScript
【项目经验】elementui--table表格自定义表头及bug
elementui--table表格自定义表头及bug(避坑)
159 0
|
7月前
|
JavaScript 前端开发 索引
Vue中拖动排序功能,引入SortableJs,前端拖动排序。
Vue中拖动排序功能,引入SortableJs,前端拖动排序。
140 0
|
9月前
|
前端开发
layui使用table组件实现排序的CSS样式调整解决方案
layui使用table组件实现排序的CSS样式调整解决方案
132 0
|
10月前
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
144 0
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
794 0
VUE element-ui之table表格内容样式(颜色)修改
对element-ui中的表格出现常见的疑惑以及解决方案
对element-ui中的表格出现常见的疑惑以及解决方案
75 0

热门文章

最新文章