vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)
更新时间:2023年10月30日 14:35:44 作者:二进制旅者
本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
vue3 elementPlus 表格实现行列拖拽及列检索功能
1、安装vuedraggable
npm i -S vuedraggable@next
2、完整代码
<template> <div class='container'> <div class="dragbox"> <el-table row-key="id" :data="tableData" :border="true"> <el-table-column v-for="item in columnList" :key="item.prop" :prop="item.prop" :label="item.label" sortable > <template #header> {{item.label}} <el-popover :visible="item.visible" placement="bottom" :width="200" trigger="click" > <template #reference> <el-button :type="item.input===''?'info':'primary'" link :icon="Search" @click.stop="item.visible = !item.visible"></el-button> </template> <div> <el-input v-model="item.input" placeholder="请输入" size="small" /> <div style="margin-top: 5px; display: flex; justify-content: space-between;"> <el-button size="small" type="primary" @click="searchItem(item)">查询</el-button> <el-button size="small" @click="resetItem(item)">重置</el-button> </div> </div> </el-popover> </template> </el-table-column> </el-table> </div> </div> </template> <script setup lang='ts'> import { Search } from '@element-plus/icons-vue' import Sortable from "sortablejs" import { ref } from 'vue' const tableData = ref([ {id: 1, name: '纸巾', type: '百货', price: 30}, {id: 2, name: '抽纸', type: '百货', price: 18}, {id: 3, name: '水杯', type: '百货', price: 50}, ]) const columnList = ref([ {label: '名称', prop: 'name', input: '', visible: false}, {label: '类型', prop: 'type', input: '', visible: false}, {label: '价格', prop: 'price', input: '', visible: false}, ]) onMounted(() => { // 页面加载完成执行拖拽函数 rowDrop() columnDrop() }) // 列查询 const searchItem = (item: any) => { item.visible = false console.log(item); } // 列查询重置 const resetItem = (item: any) => { item.visible = false item.input = '' console.log(item); } // 行拖拽 const rowDrop = () => { const tbody = document.querySelector('.dragbox .el-table__body-wrapper tbody'); Sortable.create(tbody, { draggable: ".dragbox .el-table__row", onEnd(evt: any) { const currRow = tableData.value.splice(evt.oldIndex, 1)[0]; tableData.value.splice(evt.newIndex, 0, currRow); console.log(tableData.value); } }); } // 列拖拽 const columnDrop = () => { const tr = document.querySelector('.dragbox .el-table__header-wrapper tr'); Sortable.create(tr, { animation: 150, delay: 0, onEnd: (evt: any) => { const oldItem = columnList.value[evt.oldIndex]; columnList.value.splice(evt.oldIndex, 1); columnList.value.splice(evt.newIndex, 0, oldItem); console.log(columnList.value); } }); } </script> <style lang='scss' scoped> .container { height: 100vh; .dragbox { height: 100%; } } </style>
到此这篇关于vue3 elementPlus 表格实现行列拖拽及列检索功能的文章就介绍到这了,更多相关vue3 elementPlus表格行列拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue自定义指令上报Google Analytics事件统计的方法
我们经常需要接入统计服务以方便运营,这篇文章主要介绍了Vue自定义指令上报Google Analytics事件统计的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论