vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vxe-table 行高拖拽

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

作者:可不简单

vxe-table实现行高拖拽功能,需更新到最新版本,通过row-config.resizable和row-resize启用,多列允许触发行高拖拽时,通过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 行高拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文