/span>p>1、安装vuedraggable
/span>code>npm i -S vuedraggablenext/span>/strong/span>/p> 2、完整代码
/span>code class="language-TypeScript"><template><div classcontainer> <div classdragbox> <el-table row-keyid :datatableData :bordertrue> <el-table-column v-foritem in columnList :keyitem.prop :propitem.prop :labelitem.label sortable > <template #header> {{item.label}} <el-popover :visibleitem.visible placementbottom :width200 triggerclick > <template #reference> <el-button :typeitem.input?info:primary link :iconSearch click.stopitem.visible !item.visible></el-button> </template> <div> <el-input v-modelitem.input placeholder请输入 sizesmall /> <div stylemargin-top: 5px; display: flex; justify-content: space-between;> <el-button sizesmall typeprimary clicksearchItem(item)>查询</el-button> <el-button sizesmall clickresetItem(item)>重置</el-button> </div> </div> </el-popover> </template> </el-table-column> </el-table> </div></div></template><script setup langts>import { Search } from element-plus/icons-vueimport Sortable from sortablejsimport { ref } from vueconst 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 langscss scoped>.container { height: 100vh; .dragbox { height: 100%; }}</style>/span>/pre> /span>/p>
