elementUI中table表格列实现拖拽 末蓝、 2022-12-16 09:03 410阅读 0赞 1、首先,需要执行`npm install sortablejs --save-dev` 安装sortable.js 2、在页面内引入 <template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="\`col\_$\{index\}\`" :prop="dropCol\[index\].prop" :label="item.label"> </el-table-column> </el-table> <pre style="text-align: left"> \{ \{dropCol\}\} </pre> <hr> <pre style="text-align: left"> \{ \{tableData\}\} </pre> </div> </template> <script> import Sortable from 'sortablejs' export default \{ data() \{ return \{ col: \[ \{ label: '日期', prop: 'date' \}, \{ label: '姓名', prop: 'name' \}, \{ label: '地址', prop: 'address' \} \], dropCol: \[ \{ label: '日期', prop: 'date' \}, \{ label: '姓名', prop: 'name' \}, \{ label: '地址', prop: 'address' \} \], tableData: \[ \{ id: '1', date: '2016-05-02', name: '刘琦', address: '某某地金沙江路 100 弄' \}, \{ id: '2', date: '2016-05-04', name: '王舞2', address: '某偶滴金沙江路 200 弄' \}, \{ id: '3', date: '2016-05-01', name: '李四3', address: ' 莫某地金沙江路 300 弄' \} \] \} \}, mounted() \{ // 阻止默认行为 document.body.ondrop = function (event) \{ event.preventDefault(); event.stopPropagation(); \}; this.rowDrop() this.columnDrop() \}, methods: \{ //行拖拽 rowDrop() \{ const tbody = document.querySelector('.el-table\_\_body-wrapper tbody') const \_this = this Sortable.create(tbody, \{ onEnd(\{ newIndex, oldIndex \}) \{ const currRow = \_this.tableData.splice(oldIndex, 1)\[0\] \_this.tableData.splice(newIndex, 0, currRow) \} \}) \}, //列拖拽 columnDrop() \{ const wrapperTr = document.querySelector('.el-table\_\_header-wrapper tr') this.sortable = Sortable.create(wrapperTr, \{ animation: 180, delay: 0, onEnd: evt => \{ const oldItem = this.dropCol\[evt.oldIndex\] this.dropCol.splice(evt.oldIndex, 1) this.dropCol.splice(evt.newIndex, 0, oldItem) \} \}) \} \} \} </script>
还没有评论,来说两句吧...