【vue開發】基於vue+element-ui框架的表格拖拽排序demo
阿新 • • 發佈:2022-03-24
表格
<el-table :data="tableData.filter(data => !fieldKeyWords || data.description.includes(fieldKeyWords))" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%; position: absolute" row-key="fldId" height="100%" > <el-table-column prop="" label="操作" min-width="135"> <template slot-scope="scope"> <el-button type="text" icon="el-icon-edit" class="op-btn" @click="editField(scope.row)" >編輯 </el-button> <el-button icon="el-icon-delete" type="text" class="btn-delete btn-el-no-padding op-btn" show-overflow-tooltip @click="removeField(scope.row)" >刪除 </el-button> </template> </el-table-column> <el-table-column header-align="center" align="center" prop="isShow" label="是否展示"> <template slot-scope="scope"> <el-switch v-model="scope.row.isShow" @change="toggleShow(scope.row)"></el-switch> </template> </el-table-column> <el-table-column prop="fldId" label="欄位ID" show-overflow-tooltip width="200" /> <el-table-column prop="description" label="欄位名稱" show-overflow-tooltip width="160" /> <el-table-column prop="fldType" label="欄位型別" width="110" show-overflow-tooltip> <template slot-scope="scope"> {{ transformFldType(scope.row.fldType) }} </template> </el-table-column> <el-table-column prop="fldDataType" label="資料型別" show-overflow-tooltip width="110"> <template slot-scope="scope"> {{ transformFldDataType(scope.row.fldDataType) }} </template> </el-table-column> <el-table-column prop="fldDataLength" label="欄位長度" show-overflow-tooltip align="center" width="80"> <template slot-scope="scope"> {{ scope.row.fldDataPrecision ? `${scope.row.fldDataLength},${scope.row.fldDataPrecision}` : scope.row.fldDataLength }} </template> </el-table-column> </el-table>
js排序
// 行拖拽 rowDrop() { // 此時找到的元素是要拖拽元素的父容器 const tbody: any = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { // 指定父元素下可被拖拽的子元素 draggable: '.el-table__row', onEnd({ newIndex, oldIndex }: any) { const currRow = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, currRow) _this.handleFieldSort(_this.tableData) } }) }