做外贸一般用哪些网站,wordpress 4.9.8中文,做网站 买空间,服装公司网站建设规划方案如有对表格拖拽进行限制某列或某行不进行拖拽的需求#xff0c;请点击#xff1a;
vue3ele-plussortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽-CSDN博客
如果你已实现拖拽需求#xff0c;但拖拽后发现表头并未改变的话#xff0c;请点击请点击
vue3ele-plussortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽-CSDN博客
如果你已实现拖拽需求但拖拽后发现表头并未改变的话请点击
解决el-table表格拖拽后只改变了数据表头没变的问题-CSDN博客
sortablejs官网
Sortable.js中文网
使用sortablejs插件对表格进行拖拽操作
npm install sortablejs --save
安装好插件后对拖拽操作进行分析
对于列拖拽点击某列的表头前后挪移时松开鼠标左键后挪移的列就应该在哪列显示。
行拖拽和列拖拽一样。
templatedivel-table:datatableDataborderscrollbar-always-onreftableHeaderrow-keyidtemplate v-foritem in setColumns :keyitem.label!-- 操作列 --el-table-columnv-ifitem.prop opratefixedright:propitem.prop:labelitem.labeltemplate #headerdiv classsearch-titlediv :classchecked ? search-titleName : 操作/divel-icon classsearch-icon clicksearchSearch color#409EFF //el-icon/div/template/el-table-column!-- 序号列 --el-table-columnv-else-ifitem.prop index:typeitem.type:labelitem.label:widthitem.width || 100/!-- 数据列 --el-table-columnv-else:propitem.prop:labelitem.label:widthitem.width || 100//template/el-table/div
/template
script setup langjsimport { ref, watch, onMounted } from vueimport Sortable from sortablejs;
let setColumns ref([{prop: index,label: 序号,type: index},{prop: name,label: 姓名},{prop: address,label: 地址},{prop: 11,label: 1},{prop: 22,label: 2},{prop: 33,label: 3},{prop: 44,label: 4},{prop: 55,label: 5},{prop: 66,label: 6},{prop: oprate,lable: }])let tableData ref([{name: Tom1,address: 上海,11: 11,22: 21,33: 31,44: 41,55: 51,66: 61,id: 1},{name: Tom2,address: 北京,11: 12,22: 22,33: 32,44: 42,55: 52,66: 62,id: 2},{name: Tom3,address: 广州,11: 13,22: 23,33: 33,44: 43,55: 53,66: 63,id: 3},{name: Tom4,address: 深圳,11: 14,22: 24,33: 34,44: 44,55: 54,66: 64,id: 4}])let checked ref(false)let sortable;const tableHeader ref(null);
onMounted(() {columnDrag(); // 初始化列拖拽事件rowDrag() // 初始化行拖拽事件})
const columnDrag () {let el tableHeader.value.$el.querySelector(.el-table__header-wrapper tr)Sortable.create(el, {animation: 180,delay: 0,onEnd(evt) {const oldItem setColumns.value[evt.oldIndex]setColumns.value.splice(evt.oldIndex, 1);setColumns.value.splice(evt.newIndex, 0, oldItem);}})}
const rowDrag () {let el tableHeader.value.$el.querySelector(.el-table__body-wrapper tbody)Sortable.create(el, {animation: 180,delay: 0,onEnd(evt) {const oldItem tableData.value[evt.oldIndex]tableData.value.splice(evt.oldIndex, 1);tableData.value.splice(evt.newIndex, 0, oldItem);}})}
/script
style scoped.search-title{display: flex;/* justify-content: space-around; */}.search-titleName{color: #409EFF;}.search-icon{cursor: pointer;margin-top: 5px;margin-left: 10px;}
/style
上述代码中对拖拽功能主要在columnDrag和rowDrag这两个方法其中onEnd方法是拖拽操作结束执行的方法在这个方法中是对当前列或当前行进行一个变量赋值赋值后对当前列或当前行进行删除再在newIndex的位置进行插入就进行了拖拽操作。
