vxe-table v3.10+ 分享实现拖拽行调整顺序、列拖拽调整顺序的用法

仰望.

已于 2024-11-18 11:01:24 修改

阅读量1.3k

点赞数 31

CC 4.0 BY-SA版权

分类专栏： vxe-ui vue 文章标签： vue.js vxe-table

于 2024-11-06 14:38:32 首次发布

本文链接：https://blog.csdn.net/abc26296/article/details/143570066

Vxe UI vue vxe-table v3.10+ 分享实现拖拽行调整顺序、列拖拽调整顺序的用法

安装

npm install vxe-pc-ui@3.3.0 vxe-table@3.11.0

main.js

import Vue from 'vue'
// ...

// 完整导入 UI 组件库
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...

// 完整导入 表格库
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

Vue.use(VxeUI)
Vue.use(VxeUITable)
//...

列拖拽

通过工具栏启用 custom 自定义列功能，默认就只差拖拽排序、冻结列等功能。

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import {
     
      reactive } from 'vue'

const gridOptions = reactive(