element table拖拽列宽保存宽度

最新推荐文章于 2024-04-08 22:06:52 发布

程序媛_panpan

最新推荐文章于 2024-04-08 22:06:52 发布

阅读量427

点赞数

文章标签： javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_46186815/article/details/131551250

版权

使用element table api里面自带函数header-dragend可解决该问题

     <el-table
              @header-dragend="headerDragend"
            >

      // 表头拖动保存列宽
      const headerDragend = (newWidth, oldWidth, column, event) => {
        const newTableHeader = state.columns.map((item, index) => {
          if (item.prop == column.property) {
            item.width = newWidth
          }
          return item
        })
        localStorage.setItem(
          'tableHeader',
          JSON.stringify(newTableHeader)
        )
      }
  onMounted(() => {
        if (localStorage.getItem('tableHeader')) {
          state.columns= JSON.parse(
            localStorage.getItem('tableHeader')
          )
        }
    })