awe-dnd 实现el-table动态拖拽设置表头

最新推荐文章于 2025-03-28 13:35:03 发布

原创

最新推荐文章于 2025-03-28 13:35:03 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui #awe

本文介绍如何在Vue和Element UI项目中利用awe-dnd插件实现el-table表头的动态拖拽功能。通过安装和注册awe-dnd，结合Vue的指令和方法，实现了表格列的拖拽排序，并详细展示了相关代码实现和效果展示。

项目场景：

VUE+Element 实现el-table动态设置表头（可拖拽）

问题描述：

由于Element组件不支持动态拖拽设置表头，所以使用awe-dnd插件实现拖拽效果

实现方法：

安装依赖

npm install awe-dnd --save

全局注册或局部注册

1、全局注册

在main.js文件中

import VueDND from 'awe-dnd';
// 注册-拖拽组件
Vue.use(VueDND);

2、局部注册（页面内注册）

import Vue from 'vue'
import VueDND from 'awe-dnd'
Vue.use(VueDND)

页面使用

1、HTML

<template>
<div class="table-box">
            <el-table
              v-loading="loading"
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{
   
   
                background: '#FAFAFA',
                color: '#000000',
                'font-family': 'Source Han Sans CN',
                'font-size': '14px',
                'font-weight': '400'
              }"
            >
              <!-- checkedTitle -->
              <el-table-column
                v-for="(title, titleIndex) in checkedTitleList"
                :key="titleIndex"
                :prop="title.column"
                :label="title.text"
                width="180"
                :sortable="title.sortable"
              >
                <template slot-scope="{ row }">
                  <span>11</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操 作"
                width="260"
                fixed="right"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="{ row }">
                  <div class="level buttons" style="padding: 0 5px">
                    <div
                      v-permission="{ action: 'auxiliary.plan:update' }"
                      class="details-btn"
                      @click="handleUpdate(row)"
                    >
                      编辑
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table