使用draggable组件实现拖拽自定义表格

最新推荐文章于 2024-05-23 22:37:26 发布

一个懒人a

最新推荐文章于 2024-05-23 22:37:26 发布

阅读量1.1k

点赞数 4

文章标签： elementui 前端 javascript vue.js visual studio

本文链接：https://blog.csdn.net/qq_53675083/article/details/125693137

版权

主要是为了给表格自定义功能添加设置项，拖拽行的位置改变更保存给后端更新页面，实现表格的前后位置变换及宽度自定义

上代码

<template>
    <div>
        <div class="text-box" v-show="showTextBox" unselectable="on" onselectstart="return false;">
            <el-row class="title">
                <el-col :span="12" align="left">自定义显示列表</el-col>
                <el-col :span="12" align="right"><i @click="showTextBox=false" class="el-icon-close"></i></el-col>
            </el-row>
            <el-row class="list-title">
                <el-col :span="4" align="center">显示</el-col>
                <el-col :span="14" class="pl20">列名</el-col>
                <el-col :span="6" align="center">拖动调整顺序</el-col>
            </el-row>
            <draggable :style="{maxHeight:textheight}" class="list-box" v-model="textLists" chosenClass="chosen"
                       forceFallback="true" :scroll="true" animation="300" handle=".moveBox" :move="onMove">
                <transition-group>
                    <el-row v-for="city in textLists" :key="city.id">
                        <el-row v-if="!city.columnshow || showRoleNew(city.columnshow[0])" class="item">
                            <el-col :span="4" align="center">
                                <el-checkbox :disab