All files / src/components/u-table-view.vue column-dynamic.vue

100% Statements 12/12
50% Branches 2/4
100% Functions 1/1
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102      7x   7x     7x                                                                                                                                                                                          
<template>
    <div v-show="false">
        <div v-if="false">
            <slot name="title"></slot>
            <slot name="cell"></slot>
            <slot name="expand-content"></slot>
            <slot></slot>
        </div>
    </div>
</template>
 
<script>
import MEmitter from '../m-emitter.vue';
import SupportDataSource from '../../mixins/support.datasource.js';
import UTableViewColumn from './column.vue';
import Vue from 'vue';
 
export default {
    name: 'u-table-view-column-dynamic',
    parentName: 'u-table-view',
    extends: UTableViewColumn,
    mixins: [MEmitter, SupportDataSource],
    watch: {
        'currentDataSource.data'(value) {
            this.addVms();
        },
        dataSource(value) {
            this.$nextTick(() => {
                if (this.currentDataSource && this.currentDataSource.load)
                    this.load();
            });
        },
    },
    created() {
        this.addVms();
    },
    destroyed() {
        this.$contact('u-table-view', (parentVM) => {
            parentVM.columnVMsMap[this._uid] = null;
            parentVM.dynamicColumnVMsMap[this._uid] = null;
            this.$dispatch(
                ($parent) => $parent.$options.name && $parent.$options.name === 'u-table-view',
                'handle-columns',
            );
        });
    },
    methods: {
        addVms() {
            // fix: 2825186155187968 动态列宽度拖动没有实时渲染
            let vms = this.currentDataSource.data.map((item) => {
                const valueField = this.valueField;
                const _this = this;
                const copiedComponent = new Vue({
                    props: _this.$attrs,
                    data() {
                        return Object.assign({}, _this.$data, {
                            columnItem: item,
                        });
                    },
                });
                Object.keys(_this).forEach((key) => {
                    if (key.startsWith('$') && key !== '$attrs' && key !== '$data') {
                        Object.assign(copiedComponent, { [key]: _this[key] });
                    }
                });
                Object.assign(copiedComponent, this._props, {
                    field: this.$at(item, valueField),
                    colSpan: 1, // 列合并还原为默认值
                });
                return copiedComponent;
            });
            // 适配 IDE 展示
            if (this.$env.VUE_APP_DESIGNER) {
                vms = [this];
            }
            this.$contact('u-table-view', (parentVM) => {
                this.parentVM = parentVM;
                parentVM.columnVMsMap[this._uid] = {
                    vnode: this.$vnode,
                    columnVM: this,
                };
                parentVM.dynamicColumnVMsMap[this._uid] = {
                    columnVM: this,
                    vms,
                };
                this.$dispatch(
                    ($parent) => $parent.$options.name && $parent.$options.name === 'u-table-view',
                    'handle-columns',
                );
            });
        },
        reload() {
            // 数据源不是function的时候,调用reload会报错,进行容错处理
            if (this.currentDataSource.load)
                this.load();
            else if (this.currentDataSource.data) // valueField里的数据变化时,field需要重新生成
                this.addVms();
        },
    },
};
</script>