当前位置: 代码网 > it编程>前端脚本>Vue.js > vxe-table 实现行高拖拽功能示例详解

vxe-table 实现行高拖拽功能示例详解

2025年02月13日 Vue.js 我要评论
vxe-table 实现行高拖拽功能,需要注意更新到最新版本才支持该功能官网:https://vxetable.cn通过 row-config.resizable 和 row-resize 启用行高拖

vxe-table 实现行高拖拽功能,需要注意更新到最新版本才支持该功能

官网:https://vxetable.cn

通过 row-config.resizable 和 row-resize 启用行高拖拽功能;
当需要多列允许触发行高拖拽时,通过 row-resize 指定任意列

<template>
  <div>
    <vxe-grid v-bind="gridoptions"></vxe-grid>
  </div>
</template>
<script>
export default {
  data () {
    const gridoptions = {
      border: true,
      rowconfig: {
        resizable: true
      },
      columns: [
        { type: 'seq', width: 70, rowresize: true },
        { field: 'name', title: 'name' },
        { field: 'sex', title: 'sex' },
        { field: 'age', title: 'age' },
        { field: 'time', title: 'time' },
        { field: 'address', title: 'address' }
      ],
      data: [
        { id: 10001, name: 'test1', role: 'develop', sex: 'man', age: 28, address: 'test abc' },
        { id: 10002, name: 'test2', role: 'test', sex: 'women', age: 22, address: 'guangzhou' },
        { id: 10003, name: 'test3', role: 'pm', sex: 'man', age: 32, address: 'shanghai' },
        { id: 10004, name: 'test4', role: 'designer', sex: 'women', age: 24, address: 'shanghai' }
      ]
    }
    return {
      gridoptions
    }
  }
}
</script>

https://gitee.com/x-extends/vxe-table

到此这篇关于vxe-table 实现行高拖拽功能示例详解的文章就介绍到这了,更多相关vxe-table 行高拖拽内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com