网站内页设置多少个关键字最好网络公司主要做哪些

引入

npm install sortablejs --save

按需引入

import Sortable from ‘sortablejs’;

方法一：

1.首先是拖拽完成之后需要重新调用列表的接口

2.el-table里面绑定一个key，在刷新数据的时候取反

方法二：

异步再次执行一次表格数据的赋值，推荐使用这种，看似呆板，但是易懂！！！

注意：

这里排序会调用一个接口，我们不要忽略了接口调用失败的数据处理，不然数据的顺序会改变与后台的数据不一致

代码

<template><div class="department-manu"><el-tableref="itsmDataTable":data="tableData"stripestyle="width: 100%; font-size: 16px;":row-style="{'font-size':'14px','height':'46px'}"><el-table-column align="center" type="selection" width="50"></el-table-column><el-table-column align="center" type="index" width="70" label="序号"></el-table-column><el-table-column align="center" prop="DEPARTNAME" label="部门名称"></el-table-column><el-table-column align="center" prop="DEPARTDESC" label="部门描述"></el-table-column><el-table-column align="center" prop="TRUENAME" label="创建人"></el-table-column><el-table-column align="center" prop="CRTIME" label="创建时间" width="165"></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>