avue表头拖拽排序，vuedraggable拖拽

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

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

拖拽用的是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拖拽相关推荐

Android表格拖拽排序,Android 拖拽排序控件 DragGridView
Android 拖拽排序控件 DragGridView Android 开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件, ...
拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
html5长按排序,H5 长按拖拽排序的实现
H5 长按拖拽排序产品需求: H5页面的一个列表,需要长按之后然后拖拽排序; vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝; 它基于Sort ...
前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...
树形可拖拽排序配置组件
效果使用场景 vue2下自定义表格表头配置: 列排序,显示/隐藏等.确保表头以配置项的形式加载,这样表格才能对修改后的配置作响应思路 1.表格使用render函数加载(如有疑问可私信),通过类似如 ...
android gridview拖动排序,Asp.net GridView 拖拽排序原创（欢迎拍砖，敬请嘴下留情！）...
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...
element ui 图片控件排序_vuedraggable+element ui实现页面控件拖拽排序效果
项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...

avue表头拖拽排序，vuedraggable拖拽

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

最新文章

热门文章