2.2 网站建设的流程,如何免费创建一个个人网站,展览馆网站建设,wordpress怎么添加栏目引入 npm install sortablejs --save 按需引入 import Sortable from ‘sortablejs’; 方法一#xff1a;
1.首先是拖拽完成之后需要重新调用列表的接口 2.el-table里面绑定一个key#xff0c;在刷新数据的时候取反 方法二#xff1a;
异步再次执行一次表格数据的赋值 方法一
1.首先是拖拽完成之后需要重新调用列表的接口 2.el-table里面绑定一个key在刷新数据的时候取反 方法二
异步再次执行一次表格数据的赋值推荐使用这种看似呆板但是易懂 注意
这里排序会调用一个接口我们不要忽略了接口调用失败的数据处理不然数据的顺序会改变与后台的数据不一致
代码
templatediv classdepartment-manuel-tablerefitsmDataTable:datatableDatastripestylewidth: 100%; font-size: 16px;:row-style{font-size:14px,height:46px}el-table-column aligncenter typeselection width50/el-table-columnel-table-column aligncenter typeindex width70 label序号/el-table-columnel-table-column aligncenter propDEPARTNAME label部门名称/el-table-columnel-table-column aligncenter propDEPARTDESC label部门描述/el-table-columnel-table-column aligncenter propTRUENAME label创建人/el-table-columnel-table-column aligncenter propCRTIME label创建时间 width165/el-table-column/div
/template
script
import Sortable from sortablejs;
export default {name: DepartmentMenu,data() {return {tableData: [], // 部门列表};},created() {this.getTableData();},mounted() {this.rowDrop();},methods: {/*** [getTableData description]获取部门列表** param {[type]} str [str description]** return {[type]} [return description]*/getTableData(str ) {if (JSON.stringify(this.$route.query) ! {}) {this.$axios.get(***********, {params: {***********},}).then((data) {const msg data.DATA || data;// 防止拖拽排序抖动const copyData JSON.parse(JSON.stringify(msg));this.tableData [];this.$nextTick(() {this.tableData copyData;});if (!this.$route.query.parentid || this.$route.query.parentid * 1 0) {this.$emit(refresh);}});} else {this.tableData [];}},/*** [拖动排序]]** return {[type]} [return description]*/rowDrop() {const tbody document.querySelector(.el-table__body-wrapper tbody);this.sortable Sortable.create(tbody, {onEnd: evt { // 拖动结束时触发我在这里调用接口改变后台的排序if (evt.oldIndex ! evt.newIndex) {const params {*******};this.$axios.get(****, { params: params }).then(() {this.getTableData();}).catch(() {const copyData JSON.parse(JSON.stringify(this.tableData));this.TABLE_DATA_GROUP [];this.$nextTick(() {this.tableData copyData;});});}},});},},
};
/script
