快捷導(dǎo)航

vxe-table 實(shí)現(xiàn)行高拖拽功能示例詳解

更新時(shí)間：2025年01月21日 09:28:59 作者：可不簡(jiǎn)單

vxe-table實(shí)現(xiàn)行高拖拽功能,需更新到最新版本,通過(guò)row-config.resizable和row-resize啟用,多列允許觸發(fā)行高拖拽時(shí),通過(guò)row-resize指定任意列,感興趣的朋友跟隨小編一起看看吧

vxe-table 實(shí)現(xiàn)行高拖拽功能，需要注意更新到最新版本才支持該功能

官網(wǎng)：https://vxetable.cn

通過(guò) row-config.resizable 和 row-resize 啟用行高拖拽功能;
當(dāng)需要多列允許觸發(fā)行高拖拽時(shí)，通過(guò) 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

到此這篇關(guān)于vxe-table 實(shí)現(xiàn)行高拖拽功能示例詳解的文章就介紹到這了,更多相關(guān)vxe-table 行高拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue3 setup訪問子組件的 DOM 元素的示例代碼
使用setup的情況下這個(gè)時(shí)候我們無(wú)法使用this,注意在setup中setup是封閉的,不會(huì)將子組件事件暴露出來(lái),所以要用defineExpose(),這篇文章主要介紹了vue3 setup訪問子組件的 DOM 元素,需要的朋友可以參考下
2023-08-08
Vue2.0實(shí)現(xiàn)調(diào)用攝像頭進(jìn)行拍照功能 exif.js實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)調(diào)用攝像頭進(jìn)行拍照功能，以及圖片上傳功能引用exif.js，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue服務(wù)端渲染的實(shí)例代碼
本篇文章主要介紹了vue服務(wù)端渲染的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
VUE?axios每次請(qǐng)求添加時(shí)間戳問題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue.js事件處理器是什么
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料
2017-03-03
vue3中el-table實(shí)現(xiàn)表格合計(jì)行的示例代碼
這篇文章主要介紹了vue3中el-table實(shí)現(xiàn)表格合計(jì)行,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
vue+Element實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue cli3 配置 stylus全局變量的使用方式
這篇文章主要介紹了vue cli3 配置 stylus全局變量的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
three.js實(shí)現(xiàn)vr全景圖功能實(shí)例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過(guò)一點(diǎn)全景相關(guān)的項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于three.js實(shí)現(xiàn)vr全景圖功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05