表头拖拽排序应用的是不同人员对数据关注点不一样,表格太长,可以把主要关注的列拖拽排序到前面,方便查看。

然后把当前用户,当前页面的排序记录在本地缓存,这样用户在下次登陆仍然能够使用自己的排序。

拖拽用的是vuedraggable 是标准的组件式封装,并且将可拖动元素放进了 transition-group 上面,过渡动画都比较好。

html 页面

打开拖拽按钮

<el-button circle size="small" @click="handleOpen" icon="el-icon-sort"></el-button>

拖拽组件

<sort-header :dialogShow="sortHeaderDialogShow":columnList="currentOptionColumns"@beforeClose="sortHeaderDialogClose"@handSubmit="handSortByCacheSubmit"
></sort-header>

因为所有的页面都要使用这个拖拽排序,所以把方法集中在mixins里面,方便调用。

下面是mixins页面

import {deepClone} from "@/util/util";
export default {data(){return {//列排序sortHeaderDialogShow: false,defaultOption: 'option',currentOptionColumns: [],//导出excelexportExcelShow:false,}},created() {//初始化this.currentOptionColumns = this[this.defaultOption].column;},mounted(){this.getSortByCache();},watch: {'defaultOption'(val) {if (val) {//监听,当前的option名称变动时刷新当前的列this.currentOptionColumns = this[this.defaultOption].column;}}},methods:{/*** 打开排序弹窗*/handleOpen(){this.sortHeaderDialogShow = true},/*** 获取排序缓存*/getSortByCache() {let currentUrl = this.$router.history.current.fullPathlet saveAccount = JSON.parse(localStorage.getItem("saber-userInfo")).content.accountlet defaultOption = this.defaultOption;let cache = localStorage.getItem(`${currentUrl}-${defaultOption}_${saveAccount}`)if(cache) {let columns = JSON.parse(cache);//重排序并进行覆盖let list = this.againSort(this.option.column, columns);// debuggerthis[this.defaultOption].column = list;}},/*** 关闭弹窗方法* 通过修改子的变量进行修改* 组件会向下传递关闭父弹窗*/sortHeaderDialogClose() {this.sortHeaderDialogShow = false},/*** 弹窗确认提交* 对列进行重排序* 修改当前页面对应的排序组件* @param columns 重排序的列数组*/handSortByCacheSubmit(columns) {let currentUrl = this.$router.history.current.fullPathlet saveAccount = JSON.parse(localStorage.getItem("saber-userInfo")).content.accountlet defaultOption = this.defaultOption;localStorage.setItem(`${currentUrl}-${defaultOption}_${saveAccount}`,JSON.stringify(columns))let list = this.againSort(this[this.defaultOption].column, columns);// debuggerthis[this.defaultOption].column = list;this.sortHeaderDialogClose();},/*** 重新排序*/againSort(optionColumn, columns) {let tempColumn = deepClone(optionColumn);let list = [];columns.forEach(item =>{for (let i = 0; i < tempColumn.length; i++) {let c = tempColumn[i];if(c.prop == item.key) {list.push(c);//移除tempColumn.splice(i, 1);break;}}})//把不存在的加入到集合的最后面list.push(... tempColumn);return list;}}
}

组件详情

<template><el-dialogtitle="列排序":visible.sync="dialogShow":close-on-click-modal="false"width="60%"append-to-body@open="initCloumn":before-close="handClose"><div class="box scrollbar-5"><draggable style="display: flex;flex-wrap: wrap;" id="myArray" v-model="column" animation="150"><!--固定排序的跟隐藏的不列出来--><div class="tag" v-for="item in column" :key="item.key" v-if="item.fixed !=true && item.hide != true">{{item.value}}</div></draggable></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="handSubmit">确 定</el-button><el-button @click="handClose">取 消</el-button></span></el-dialog>
</template><script>import draggable from "vuedraggable"export default {components: {draggable},props: {/*** 弹窗*/dialogShow: {type: Boolean,default: false},columnList: {type: Array,default: () => {return []}}},data() {return {column: []};},methods: {initCloumn() {this.column = [];this.columnList.forEach(res =>{this.column.push({fixed:res.fixed,hide:res.hide,key: res.prop,value: res.label})})},handSubmit() {this.$emit('handSubmit', this.column)},handClose() {this.$emit('beforeClose', this.column)}},};
</script><style scoped>.tag{padding: 5px 10px;border: 1px solid #c0c4cf;border-radius: 9px;margin: 5px;cursor:pointer;}
</style>

avue表头拖拽排序,vuedraggable拖拽相关推荐

  1. Android表格拖拽排序,Android 拖拽排序控件 DragGridView

    Android 拖拽排序控件 DragGridView Android 开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件, ...

  2. 拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素

    介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...

  3. html5长按 排序,H5 长按 拖拽排序的实现

    H5 长按拖拽排序 产品需求: H5页面的一个列表,需要长按之后 然后拖拽排序; vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝; 它基于Sort ...

  4. 前端项目中常用的工具包(拖拽排序表格、打印导出表格、文本复制等)【持续更新~~~】

    表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介 一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...

  5. html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者

    大家好,最近做的项目要用到拖拽排序,我现在的项目是 首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...

  6. 树形可拖拽排序配置组件

    效果 使用场景 vue2下自定义表格表头配置: 列排序,显示/隐藏等.确保表头以配置项的形式加载,这样表格才能对修改后的配置作响应 思路 1.表格使用render函数加载(如有疑问可私信),通过类似如 ...

  7. android gridview拖动排序,Asp.net GridView 拖拽排序    原创(欢迎拍砖,敬请嘴下留情!)...

    原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...

  8. element ui 图片控件 排序_vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...

  9. ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable

    今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...

最新文章

  1. 9.DRN: A Deep Reinforcement Learning Framework for News Recommendation论文详解
  2. Golang undefined: strings.ReplaceAll解决
  3. 利用Zabbix ODBC monitoring监控MySQL
  4. Azure认知服务之表单识别器
  5. 将Java应用程序打包为一个(或胖)JAR
  6. 远程修改linux文件内容,用VS Code连接远程Linux服务器实时修改代码
  7. [css] css中Scroll-behavior属性有什么应用场景?
  8. 三星成功开发LPDDR5X DRAM 将扩大超高速数据服务市场
  9. 微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
  10. 如何在Windows下发布QT应用程序
  11. springboot整合shiro之thymeleaf使用shiro标签
  12. 数学四大思想八大方法_高中数学八种思维方法如何训练数学思维,高中数学的四大思想是什么?...
  13. 视频,多媒体本地化总结
  14. 简单的UDP监听需要打开w网路岗才能接收到数据的原因和解决办法
  15. 每次遇到浏览器主页被篡改的问题,就特别气愤加头疼
  16. 数学模板-BSGSEXBSGS
  17. 实现Gateway网关统一Swagger入口
  18. BFS解小孩分油问题
  19. 学Python用什么系统?
  20. DM数据库的启停以及数据库状态检查

热门文章

  1. 商用密码最新标准和国家标准
  2. 如何设置计算机断电自启动,[Win10电脑重启如何设置]电脑断电自动重启设置
  3. google earth engine导入的shp文件属性表乱码
  4. Centos 7安装配置NTP网络时间同步服务器
  5. 杂谈篇之我是怎么读源码的,授之以渔
  6. 公牛母牛--------猜数字游戏
  7. 应用于旅行商问题的PSO(2003)
  8. 过敏性鼻炎给宝宝带来哪些危害?
  9. Android Studio集成百度SDK问题
  10. win10打不开设置,弹出来找不到应用程序