yyzone-bip/src/components/bip/table/column.js

升级新的ui标准后的yyzone库

import { getColumnId } from './helper';
import Checkbox from '../../base/checkbox';
import { Column } from './data-types';

export default {
    name: 'BipTableColumn',
    inject: ['tableRoot'],
    props: {
        // 列类型 可选值 selection/index/expand
        type: {
            type: String,
            default: 'default'
        },
        // 列的字段名
        prop: String,
        // 标题
        label: String,
        width: [Number, String],
        selectable: {
            type: Function,
            default: () => true
        },
        index: Function,
        minWidth: String,
        renderHeader: Function,
        align: String,
        className: String,
        labelClassName: String,
        reserveSelection: Boolean
    },
    components: {
        Checkbox
    },
    data() {
        return {
            id: getColumnId(),
            plainData: new Column(this),
            _width: 0
        }
    },
    render(h) {
        return h('div', this.$scopedSlots.default)
    },
    methods: {
        renderTableCell(h, row, columnVal, index) {
            let children = '';
            if (this.type == 'selection') {
                children = h(Checkbox, {
                    on: {
                        'on-change': selected => {
                            this.handleSelect(selected, row);
                        }
                    },
                    props: {
                        disabled: !this.selectable(row.data),
                        value: row.selected
                    }
                })
            } else if (this.type == 'index') {
                children = index
            } else children = this.$scopedSlots.default ? this.$scopedSlots.default({ row: row.data, data: columnVal, index }) : columnVal

            return h('div', 
                {
                    class: 'bip-table-column bip-table-cell'
                },
                [ children ]
            )
        },
        renderTableHeader(h) {
            let children = this.label;
            if (this.type == 'selection') {
                children = h(Checkbox, {
                    props: {
                        value: this.tableRoot.isAllSelected
                    },
                    on: {
                        'on-change': selected => {
                            this.handleSelectAll(selected);
                        }
                    }
                })
            } else if (this.type == 'index') {
                children = this.label || '';
            } else if (typeof this.renderHeader === 'function') {
                children = this.renderHeader({column: this})
            } else if (this.$scopedSlots.header) {
                children = this.$scopedSlots.header({column: this})
            }
            return h('div', {
                class: 'bip-table-header-th bip-table-header-cell',
            }, [ children ])
        },
        renderTableExpand(h, row, columnVal, index) {
            return h('div', {
                class: 'bip-table-expand'
            }, [ this.$scopedSlots.default ? this.$scopedSlots.default({ row: row.data, data: columnVal, index }) : ''])
        },
        handleSelect(selected, row) {
            if (!this.selectable(row.data)) return;
            this.tableRoot.handleSelect(selected, row);
        },
        handleSelectAll(selected) {
            this.tableRoot.handleSelectAll(selected, this.selectable);
        }
    },
    created() {
        this.tableRoot.registerColumn(this);
    },
    destroyed() {
        this.tableRoot.unregisterColumn(this);
    }
}