vue3 elementPlus 表格实现行列拖拽及列检索功能

1、安装vuedraggable

npm i -S vuedraggable@next

2、完整代码

  

    
      
        
          {{item.label}}
          
            
              
            
            

              
              

                查询
                重置
              
            
          
        
      
    
  



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', inpu服务器托管网t: '', 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);
    }
  });
}



.container {
  height: 100vh;
  .dragbox {
    height: 100%;
  }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Excel转图片（Java方式） 先看效果、先看效果、先看效果

 先看效果、先看效果、先看效果 左侧：Excel的截图                                                右侧：生成的图片             开发工具： Eclipse 开发环境： JDK1.8 使用技术： G…