| | |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | } |
| | | >>>.el-table__row { |
| | | cursor: move; |
| | | position: relative; |
| | | } |
| | | |
| | | .table { |
| | | width: 100%; |
| | |
| | | @row-click="rowClick" :show-summary="data.countFleid!=undefined && data.countFleid.length > 0" |
| | | :summary-method="getSummaries" :row-class-name="tableRowClassName" :row-key="record=>record[rowKey]" |
| | | :current-row-key="data.currentId" :highlight-current-row="data.highlight===undefined||data.highlight" |
| | | :span-method="spanMethod" :key="specialKey"> |
| | | :span-method="spanMethod" :key="specialKey" :class="{sortable:data.sortable}"> |
| | | <el-table-column type="selection" :width="selectionWidth" v-if="data.showSelect" :key="Math.random()"> |
| | | </el-table-column> |
| | | <el-table-column type="index" align="center" label="序号" :width="selectionWidth" v-if="data.isIndex" :key="Math.random()"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | Page |
| | | } from 'iview'; |
| | | import { |
| | | data |
| | | } from 'jquery'; |
| | | import Sortable from 'sortablejs'; |
| | | export default { |
| | | props: { |
| | | selectionWidth: { |
| | |
| | | 'token': sessionStorage.getItem('token') |
| | | } |
| | | this.specialKey = this.specialKey+Math.random()*100; |
| | | // 是否可拖动列表--此功能暂时未实现 |
| | | if(this.data.sortable){ |
| | | this.$nextTick(() => { |
| | | this.initializeSortable() |
| | | }) |
| | | } |
| | | }, |
| | | methods: { |
| | | initializeSortable() { |
| | | let className =".el-table__body-wrapper > table > tbody"; |
| | | const table= document.querySelector(className); |
| | | const self = this |
| | | Sortable.create(table, { |
| | | animation: 150, //动画时长 |
| | | handle: ".el-table__row", //可拖拽区域class |
| | | onEnd({ newIndex, oldIndex }) { |
| | | console.log(3333,newIndex, oldIndex) |
| | | const movedItem = this.tableData[oldIndex]; |
| | | this.tableData.splice(oldIndex, 1); |
| | | this.tableData.splice(newIndex, 0, movedItem); |
| | | } |
| | | }) |
| | | }, |
| | | getUpdatedOrder() { |
| | | // 根据拖拽后的顺序获取更新的数据 |
| | | // 这里需要实现你的逻辑 |
| | | }, |
| | | updateTableData(newOrder) { |
| | | // 根据新的顺序更新表格数据 |
| | | // 这里需要实现你的逻辑 |
| | | }, |
| | | rowspan(spanArr, position, spanName) { |
| | | this.tableData.forEach((item, index) => { |
| | | if (index === 0) { |