vue-element/umyui 监听表格列宽变化

需求:用户通过拖动表格列宽来实现保存用户自己的个性化设置

解决:

因为是要动态获取用户设置的列宽,所以需要去监听列宽变化才行,百度找了好几个都不太合适,然后发现element文档自带这个事件,所以浪费了一堆时间,所以文档还是得仔细瞅

在这里插入图片描述

但是呢,我用的是umyui的ux-grid,而umy只是改造了element-ui等等库的表格组,所以umy中ux-grid这个事件返回的参数和element是有区别的,并没有直接返回列宽

在这里插入图片描述

经过测试发现返回参数中column里面的width是原宽度,renderWidth是新宽度,于是问题就解决了
主要代码如下:
html:

<ux-grid border
      ref="saleBill"
      :data="saleBill"
      show-overflow
      height="500"
      show-summary
      @header-dragend="changeColumnWidth">
      <ux-table-column type="checkbox" width="50" align="center"></ux-table-column>
      <ux-table-column field="sort" title="排序" prop="sort" width="50" align="center"></ux-table-column>
      <ux-table-column v-for="items in tableHeadList"
      :resizable="true" :width="items.width ? items.width : 120"
      :field="items.aliasName!=null ? items.aliasName : items.name" :title="items.ZDM"
      :key="Math.random()"
      :edit-render="items.isEdit == '1' ? {autofocus: '.el-input__inner'} : false" align="center">
          
          <el-input v-if="items.type=='7'" :readonly="mainBill.IsDel_kcsl == 1"
                    v-model="row[items.name]"
                    @keyup.native.enter="nextFocus($event,row,items.name,$rowIndex)"></el-input>
      </ux-table-column>
    </ux-grid>

method:

changeColumnWidth({ column, columnIndex}){
 if(column.width != column.renderWidth){
   this.tableHeadList[columnIndex-2].width = column.renderWidth
   // this.saveHeadConfig()
 }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今夜大风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值