vue实现改变table中列的顺序【向上、向下、置顶、置底】

目标页面

如下图所示：column取到的是上一个table的列名

代码示例

页面代码

<template>
    <div style="padding:20px">
        <el-dialog :visible='showTable' title='Configuration' width="50%" :show-close="true" :close-on-click-modal="false" @close="onEditCloses">
            <el-table :data="tableData">
                <el-table-column prop="code" label='column'></el-table-column>
                <el-table-column label='order' width="350px;">
                    <template slot-scope="scope">
                        <el-button @click.stop="handleTop(scope.$index, scope.row, 1)" size="small">top</el-button>
                        <el-button @click.stop="handleUp(scope.$index, scope.row,1)" size="small">up</el-button>
                        <el-button @click.stop="handleDown(scope.$index, scope.row,1)" size="small">down</el-button>
                        <el-button @click.stop="handleBottom(scope.$index, scope.row, 1)" size="small">bottom</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="dialog-footer" style="text-align: center; margin-top: 20px">
                <el-button type="primary" @click.native="handleOk" size="small">ok</el-button>
            </div>
        </el-dialog>
    </div>
</template>

完整版js代码

<script>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component
export default class Setting extends Vue {
    // @Prop({ default: {} }) visualType;
    @Prop({}) visible
    @Prop({}) tableColumns
    showTable = false
    tableData = []

    @Watch('visible', { deep: true })
    async onvisibleChange (newVal) {
        if (newVal) {
            this.showTable = this.visible;
            let mm = []
            this.tableColumns.forEach((el, index) => {
                mm.push({ 'code': el, 'no': index })
            });
            this.tableData = mm
        }
    }
    async onEditCloses () {
        this.showTable = false;
        this.$emit('onCloses');
    }
    handleOk () {
        console.log(this.tableData)
        let kk = []
        this.tableData.forEach((item) => {
            kk.push(item.code)
        })
        console.log(kk)
        this.$emit('childByValue', kk)
        this.showTable = false;
        this.$emit('onCloses');
    }

    //处理置顶置底
    handleTopDown (index, row, type, moveType) {
        let temp, arr;
        if (type === 1) {
            temp = this.tableData.splice(index, 1)[0];
            arr = this.tableData;
        }
        // 将元素push到数组最后一位
        return moveType === "top" ? arr.unshift(temp) : arr.push(temp);
    }
    // 置顶
    handleTop (index, row, type) {
        this.handleTopDown(index, row, type, "top");
    }
    // 置底
    handleBottom (index, row, type) {
        this.handleTopDown(index, row, type, "down");
    }
    // 调整顺序，arr 数组，indexAdd 添加元素的位置，indexDel 删除元素的位置（indexAdd与indexDel交换位置）
    handleChangeOrder (arr, indexAdd, indexDel, row, type) {
        let tempArr
        if (type === 1) {
            tempArr = arr
        }
        tempArr[indexAdd] = tempArr.splice(indexDel, 1, tempArr[indexAdd])[0];
        return tempArr;
    }
    // 上移，与前一个元素交换顺序
    handleUp (index, row, type) {
        console.log({ index })
        this.handleChangeOrder(this.tableData, index, index - 1, row, type);
    }
    // 下移，与后一个元素交换顺序
    handleDown (index, row, type) {
        this.handleChangeOrder(this.tableData, index, index + 1, row, type);
    }
}