jQuery實現表格的數據拖拽
jQuery實現將一個ant-table的數據拖拽復制到另一個ant-table,供大傢參考,具體內容如下
需求
1、ant-design-vue
2、將一個嵌套在drawer中的table數據拖拽復制到drawer外面的table中
效果
拖拽中
拖拽後
HTML
<el-button type="text" size="small" class="text-btn" @click="choseField">選擇字段</el-button> // 拖拽到table <a-table class="droptable" :columns="columns_copy" :dataSource="fieldInfoList"> ..... </a-table> // 從drawer中拖拽數據 <field-select ref="fieldList" @setFieldList="setFieldList"></field-select>
JS
initDrop() { // initDrop在mounted中觸發,使table區域可以接受拖拽 let that = this $('.table_container').droppable({ scope: 'basic', // 設置兩個相同的scope接受拖拽信息 tolerance: 'fit', drop(e) { let dropFieldInfo = { enName: that.dragField.enname || '', cnName: that.dragField.name || '', } that.fieldInfoList.push(dropFieldInfo) that.repeatZhName() // 校驗字段是否重復的方法 } }) }, choseField() { this.$refs.fieldList.setShowState(true) //顯示drawer // 因為drawer中的dom對象實在打開抽屜時候才會被創建,所以不能再drawer組件中進行初始化 this.$nextTick(() => { // sort-table為抽屜組件中ant-table的類名 $('.sort-table tbody tr').draggable({ scope: 'basic', //相同的scope name scroll: false, zIndex: 10000, // zindex設置更高避免拖拽的數據被drawer遮住,同時去除遮罩層樣式 helper: 'clone', appendTo: 'body', //避免遮蓋 containment: document.getElementById('app'), start: e => { // rowIndex第一行是表頭,數據行的rowindex從1開始 let currentIndex = e.target.rowIndex - 1 // console.log(this.$refs.fieldList.tableData[currentIndex]) this.dragField = this.$refs.fieldList.tableData[currentIndex] }, stop: e => { // this.eventType = 'CLICK' console.log('拖拽結束事件') console.log(e) } }) }) },
註意事項
1、drop和drag區域要配置相同的scope
2、為瞭避免拖拽的helper被遮住,drag要配置zIndex和appendTo
3、如果表格有翻頁或者查詢功能,列表數據會刷新,jq的拖拽會失效,在getList請求方法成功之後,在初始化一次拖拽事件即可,然後使用$emit讓父組件接收一下
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- el-table點擊某一行高亮並顯示小圓點的實現代碼
- 關於el-table表格組件中插槽scope.row的使用方式
- vue+elementUI實現內嵌table的方法示例
- MySQL連接查詢你真的學會瞭嗎?
- vue中的slot-scope及scope.row用法