主要是为了给表格自定义功能添加设置项，拖拽行的位置改变更保存给后端更新页面，实现表格的前后位置变换及宽度自定义

 

 上代码

<template><div><div class="text-box" v-show="showTextBox" unselectable="on" onselectstart="return false;"><el-row class="title"><el-col :span="12" align="left">自定义显示列表</el-col><el-col :span="12" align="right"><i @click="showTextBox=false" class="el-icon-close"></i></el-col></el-row><el-row class="list-title"><el-col :span="4" align="center">显示</el-col><el-col :span="14" class="pl20">列名</el-col><el-col :span="6" align="center">拖动调整顺序</el-col></el-row><draggable :style="{maxHeight:textheight}" class="list-box" v-model="textLists" chosenClass="chosen"forceFallback="true" :scroll="true" animation="300" handle=".moveBox" :move="onMove"><transition-group><el-row v-for="city in textLists" :key="city.id"><el-row v-if="!city.columnshow || showRoleNew(city.columnshow[0])" class="item"><el-col :span="4" align="center"><el-checkbox :disabled="!!city.fixed" v-model="city.checked"></el-checkbox></el-col><el-col :span="14" class="text pl20">{{ city.name }}</el-col><el-col :span="6" align="center"><div class="moveBox" v-if="!city.fixed"><i class="iconfont iconsantiaogang"></i></div></el-col></el-row></el-row></transition-group></draggable><el-row class="btns"><el-col :span="12"><el-button type="text" @click="cleanText">恢复默认</el-button></el-col><el-col :span="12" align="right" class="fontSize0"><el-button size="mini" @click="showTextBox = false">取消</el-button><el-button size="mini" type="primary" @click="saveText">保存</el-button></el-col></el-row></div><div class="bag" v-show="showTextBox" @click="showTextBox=false" @contextmenu.prevent="showTextBox=false"></div></div>
</template><script>
import { saveTableHeadListText, getTableHeadListText } from '../../api/main';
import { showRoleNew } from '@/utils/common';
import draggable from 'vuedraggable';let that;
export default {name: 'tableHeadList',props: {textList: {type: Array,default: () => []},orderName: {type: String},type: {type: String}},components: { draggable },data() {that = this;return {showRoleNew,showTextBox: false,trajectory: [], //移动轨迹textheight: 200,textLists: []};},methods: {onMove(e) {if (e.relatedContext.element.fixed) return false;return true;},//获取屏幕高度beforeMount() {var h = document.documentElement.clientHeight || document.body.clientHeight;this.textheight = h - event.y - 50 + 'px'; //减去页面上固定高度height},showCustom() {this.$nextTick(() => {this.textLists = JSON.parse(JSON.stringify(this.textList));});if (this.showTextBox) {return;}this.showTextBox = true;this.beforeMount();},saveText() {let listLength = this.textLists.filter(item => {return item.checked;}).length;if (listLength < 5 && listLength !== this.textLists.length) {return this.$message.warning('显示列表数量不能小于5个！！！');}this.showTextBox = false;this.$emit('saveText');saveTableHeadListText({tableName: this.orderName,fieldStr: JSON.stringify(this.textLists)}).then(res => {if (res.data.status === 200) {this.$emit('saveText', this.textLists);}});},saveWidth(list) {saveTableHeadListText({tableName: this.orderName,fieldStr: JSON.stringify(list)}).then(res => {if (res.data.status === 200) {this.$emit('saveText', list);}});},getTableHeadList() {this.$emit('saveText');getTableHeadListText({tableName: this.orderName}).then(res => {if (res.data.status === 200) {if (res.data.data) {this.$emit('saveText', JSON.parse(res.data.data.fieldStr), 'start');} else {this.$emit('saveText', [], 'start');}}});},cleanText() {this.$emit('cleanText');}}
};
</script><style scoped lang="scss">
.text-box {position: fixed;top: 80px;left: 50%;z-index: 9999;background: #FFFFFF;width: 500px;margin-left: -250px;border: 1px solid #e3e3e3;border-radius: 8px;color: #111A34;overflow: hidden;.title {height: 50px;line-height: 50px;border-bottom: 1px solid #EFEFEF;font-size: 16px;padding: 0 20px;.el-icon-close {font-size: 20px;}}.list-title {height: 40px;line-height: 40px;font-size: 14px;background: #FAFAFA;border-radius: 8px 8px 0px 0px;padding: 0 5px;margin: 10px;}.list-box {padding: 0 10px 10px 10px;overflow-y: auto;.item {width: 100%;height: 40px;line-height: 39px;font-size: 14px;border-bottom: 1px solid #E9E9E9;padding: 0 5px;&:hover {background: #eeeeee;}}}.btns {font-size: 14px;padding: 20px;box-shadow: 0px -2px 6px 0px #EBEBF4;}.moveBox {cursor: move;color: #999999;}
}.bag {position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(30, 36, 42, 0.49);z-index: 9998;
}
</style>

 saveText(list, type) {//进入页面获取表头数据if (type === 'start') {this.$parent.loading = falseif (list.length) {//后台返回数据this.tableheadlist = listthis.$nextTick(() => {this.$refs.reportTable.doLayout();})} else {//使用默认数据this.tableheadlist = tableHead[this.orderName] || []this.$nextTick(() => {this.$refs.reportTable.doLayout();})}try {this.getRightTableHeight()} catch (e) {}} else {if (list && list.length) {this.$parent.loading = falsethis.$message.success('保存成功')this.tableheadlist = listthis.$nextTick(() => {this.$refs.reportTable.doLayout();})} else {this.$parent.loading = truethis.tableheadlist = []                  }}