antdv table设置列隐藏显示与位置调换

export default {

name: 'tableSeting',
props: {
    visible: {
        type: Boolean,
        default: false
    },
    uploading: {
        type: Boolean,
        default: false
    },
    width: {
        type: Number,
        default: 700
    },
    defColumns: {
        type: Array,
        default: []
    },
    columns: {
        type: Array,
        default: []
    }
},
data () {
    return {
        idx: 0
    }
},
created () {
    // console.log(this.$parent.$options.parent)
    // this.$parent.$options.parent.initColumns();
},
methods: {
    close () {
        this.$emit('close')
    },
    settingDialog () {
        this.visible = true;
    },
    handleOk () {
        this.visible = false;
    },
    handleClose () {
        this.visible = false;
    },
    selectFn (index) {
        this.idx = index
        this.checkInd = index
    },
    topOrDown (key) {
        if (this.idx === -1) {
            alert('请选择要移动的列');
            return;
        }
        let length = this.defColumns.length;
        let i = this.idx;
        switch (key) {
            case 'top':
                if (i === 0) {
                    alert('已经在第一列了');
                    return;
                }
                const item1 = this.defColumns[i];
                this.defColumns.splice(i, 1);
                this.defColumns.unshift(item1);
                this.idx = 0;
                this.onColSettingsChange()
                break;
            case 'up':
                if (i === 0) {
                    alert('已经在第一列了');
                    return;
                }
                [this.defColumns[i], this.defColumns[i - 1]] = [this.defColumns[i - 1], this.defColumns[i]];
                this.idx = i - 1;
                this.onColSettingsChange()
                break;
            case 'down':
                if (i === length - 1) {
                    alert('已经在最后一列了');
                    return;
                }
                [this.defColumns[i + 1], this.defColumns[i]] = [this.defColumns[i], this.defColumns[i + 1]];
                this.idx = i + 1;
                this.onColSettingsChange()
                break;
            case 'bottom':
                if (i === length - 1) {
                    alert('已经在最后一列了');
                    return;
                }
                const item2 = this.defColumns[i];
                this.defColumns.splice(i, 1);
                this.defColumns.push(item2);
                this.idx = length - 1;
                this.onColSettingsChange()
                break;
        }
    },
    onChangeSwitch (checked, event) {
        let index = event.target.dataset.index;
        this.defColumns[index].isshow = checked;
        this.$nextTick(() => {
            this.onColSettingsChange()
        })

    },
    onColSettingsChange () {
        var key = this.$route.name + ":colsettings";
        // 这里需要把函数存到 sessign中，需把函数变成字符串
        // 这里转字符串了  要在用的地方转换一下
        var defColumns =JSON.stringify(this.defColumns, function(key, val) {
            if (typeof val === 'function') {
                return val + '';
            }
            return val;
        })
        Vue.ls.set(key, defColumns, 7 * 24 * 60 * 60 * 1000)
        const cols = this.defColumns.filter(item => {
            if (item.isshow) {
                return true;
            }
            return false
        })
        this.columns = cols;
        this.$nextTick(() => {
            this.$emit('setTableColumns', cols);
        })
    },
}

}

// 这里是需要在设置table头部的地方转换的方法

        let colSettings =JSON.parse(Vue.ls.get(key),function(k,v){
            if(k=="customRender"&&v.includes('function')){
            // 判断是否是自定义头部，做特殊处理
                let t = v.replace('customRender','');
                t = eval("(function(){return "+v+" })()");
                return t
            }
            return v;
        });