表格拖拽插件-从零开始vue3+vite+ts+pinia+router4后台管理(10)
系列文章
从零开始vue3+vite+ts+pinia+router4后台管理(1)
从零开始vue3+vite+ts+pinia+router4后台管理(2)-页面布局
从零开始vue3+vite+ts+pinia+router4后台管理(3)-动态路由
从零开始vue3+vite+ts+pinia+router4后台管理(4)-导航标签栏和keep-alive缓存
从零开始vue3+vite+ts+pinia+router4后台管理(5)-二次封装表格1.0
从零开始vue3+vite+ts+pinia+router4后台管理(6)-全局自定义指令实现节流与防抖
什么才是完美的表格二次封装elementPlus表格？-从零开始vue3+vite+ts+pinia+router4后台管理(7)
elementPlus-Form封装动态表单-从零开始vue3+vite+ts+pinia+router4后台管理(8)
优雅的使用element-plus的dialog-从零开始vue3+vite+ts+pinia+router4后台管理(9)
bash
# 克隆项目 gitee地址
git clone https://gitee.com/3439/Spurs-Admin.git
# 进入项目目录
cd Spurs-Admin
# 安装依赖
npm install
# 本地开发 启动项目
npm run dev
1.插件地址
2.插件安装
bash
npm i element-plus-table-dragable3.使用
html
<template>
<div class="app-container">
<div class="filter-container">
<el-input class="w-100" v-model="queryForm.keyword" placeholder="关键字搜索" />
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
<el-button class="green-button" :icon="Plus" @click="handleSearch">增加</el-button>
<el-button class="green-button" :icon="Plus" @click="getDragableData">查看排序后的数据</el-button>
</div>
<div class="table-con">
<el-table
v-dragable="dragOptions"
v-loading="loading"
:data="tableData"
style="width: 100%"
row-key="id"
border
>
<el-table-column prop="nickName" label="姓名"/>
<el-table-column label="排序" align="center" width="60">
<template #default>
<Sort style="width: 1em; height: 1em; margin-right: 8px;cursor: all-scroll"/>
</template>
</el-table-column>
<el-table-column prop="roleName" label="权限名称"/>
<el-table-column prop="title" label="介绍"/>
<el-table-column prop="phone" label="联系方式"/>
<el-table-column prop="address" label="地址"/>
<el-table-column prop="createTime" label="日期"/>
<el-table-column fixed="right" label="操作" width="120">
<template #default>
<el-button link type="primary" size="small">修改</el-button>
<el-button link size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<Pagination
v-model:page="pagination.pageNum"
v-model:size="pagination.pageSize"
:total="total"
@pagination="getTableData"
/>
</div>
</template>
<script setup lang="ts">
import {reactive} from 'vue'
import { Search,Plus } from '@element-plus/icons-vue'
import {useTable} from '@/hooks/useTable'
import tableApi from '@/api/table'
import { vDragable } from "element-plus-table-dragable";
const queryForm = reactive({
keyword: ''
})
const {
tableData,
pagination,
total,
loading,
getTableData,
handleSearch,//搜索
} = useTable(tableApi.packTableList,queryForm)
const dragOptions = [
{
selector: "tbody", // css选择器的字符串，定义哪些列表单元可以进行拖放
option: {
animation: 150,//number 单位：ms，定义排序动画的时间；
onEnd: (evt:any) => {//function 列表单元拖放结束后的回调函数
console.log(evt);
const itemEl = evt.item; // dragged HTMLElement
console.log(itemEl);
console.log("222",evt.oldIndex, evt.newIndex);
const copyRow = JSON.parse(JSON.stringify(tableData.value[evt.oldIndex]));//拷贝拖动的一行数据存起来
tableData.value.splice(evt.oldIndex, 1);//删除拖动的一行数据
tableData.value.splice(parseInt(evt.newIndex), 0, copyRow);//插入到拖动的位置
},
},
},
]
const getDragableData = () =>{
console.log(tableData.value);
}
</script>
<style scoped>
.w-100{
width: 200px;
margin-right: 5px;
}
</style>selector: "tbody", // css选择器的字符串，定义哪些列表单元可以进行拖放
animation: 150,//number 单位：ms，定义排序动画的时间；
onEnd: (evt:any) => {//function 列表单元拖放结束后的回调函数
对拖拽后的表格数据进行出来排序
const copyRow = JSON.parse(JSON.stringify(tableData.value[evt.oldIndex]));//拷贝拖动的一行数据存起来
tableData.value.splice(evt.oldIndex, 1);//删除拖动的一行数据
tableData.value.splice(parseInt(evt.newIndex), 0, copyRow);//插入到拖动的位置