magiccube-vue3/package/components/table/head.js

vue3-js版组件库

import { inject, computed } from 'vue'
import McCheckbox from '../checkbox'

/**
 * 列表表头 列元素控件
 */
const Cell = {
    props: {
        width: [String, Number],
        colSpan: Number,
        rowSpan: Number,
        groupNumber: Number,
        fixed: Boolean,
        left: Number,
        right: Number,
        align: {
            type: String,
            default: 'left'
        },
        headerSlot: [Object, null, String],
        fixedLeftLast: Boolean,
        fixedRightFirst: Boolean,
        tip: String,
        tipWidth: [String, Number],
        tipHeight: [String, Number],
    },
    setup(props, { slots }) {

        const showLeftShadow = inject('showLeftShadow')
        const showRightShadow = inject('showRightShadow')

        /* 多级表头时 颜色区分 */
        const getGroupClassName = number => number%2 === 0? 'mc-table__th--even' : 'mc-table__th--odd'

        /* 表头提示 */
        const tipNode = () => props.tip? (
            <McTip position="bottom" content={props.tip} max-width={props.tipWidth} max-height={props.tipHeight}>
                <img src={require('../../img/icon_explain.svg')} style="margin-left:8px;vertical-align: middle;" />
            </McTip>
        ) : ''

        return () => (
            <th class={[
                'mc-table__th',
                [props.groupNumber? getGroupClassName(props.groupNumber) : ''],
                {
                    'mc-table__th--fixed': props.fixed,
                    'mc-table--fixed-left-last': props.fixedLeftLast,
                    'mc-table--fixed-right-last': props.fixedRightFirst,
                    'mc-table--cell-shadow-left': props.fixedLeftLast && showLeftShadow.value,
                    'mc-table--cell-shadow-right': props.fixedRightFirst && showRightShadow.value,
                }
            ]}
            colspan={props.colSpan}
            rowspan={props.rowSpan}
            style={{
                left: props.left? props.left + 'px' : 0,
                right: props.right? props.right + 'px' : 0,
                width: props.width ? props.width + 'px' : '',
                textAlign: props.colSpan? 'center' : props.align,
            }}>
                { props.headerSlot ? props.headerSlot : slots.default && slots.default() }
                { tipNode() }
            </th>
        )
    }
}

export default {
    props: {
        column: Array,
        width: String,
        rowCount: Number,
        checkbox: Boolean,
        checkboxWidth: [String, Number],
        fixedLeft: Number,
        type: String,
        subCheckboxSomeSelected: Boolean,
    },
    emits: ['select', 'render-done'],
    setup(props, { emit, expose }) {

        const selectAll = inject('selectAll')
        const handleSelectAll = inject('handleSelectAll')
        const checkboxStyle = inject('checkboxStyle')
        const showLeftShadow = inject('showLeftShadow')

        /* 多级表头计算 */
        const rows = computed(() => {
            const arr = []
            let times = 0
            const count = props.rowCount || 0
            while (times < count) {
                const res = get(times)
                arr.push(res)
                times++
            }
            return arr || []

            function get(number) {
                return props.column.filter(n => n.rowspan === number)
            }
        })

        /* 表头元素 */
        const trNode = (item, index) => (
            <tr>
                {
                    index === 0 && props.checkbox ? (
                        <th class={[
                            'mc-table__th',
                            'mc-table-column__checkbox',
                            {
                                'mc-table--fixed-left-last': props.fixedLeft === 0 && props.type === 'fixed',
                                'mc-table--cell-shadow-left': props.fixedLeft === 0 && props.type === 'fixed' && showLeftShadow.value,
                            }
                        ]}
                        rowspan={props.rowCount}
                        style={{
                            width: props.checkboxWidth + 'px',
                        }}>
                            <McCheckbox v-model={selectAll.value}
                                include={props.subCheckboxSomeSelected}
                                name="selectAll"
                                onChange={handleSelectAll}
                                style={checkboxStyle} />
                        </th>
                    ) : ''
                }
                {
                    item.map((n, idx) => {
                        // 新版mopai规范列表表头全部居左 不可设置
                        const { align, label, headerTip, headerTipWidth, headerTipHeight } = n.props

                        /* 多级表头参数 */
                        const rowSpan = n.colspan ? null : props.rowCount - n.rowspan
                        return (
                            <Cell width={n.cellWidth}
                                rowSpan={rowSpan}
                                align={align}
                                colSpan={n.colspan}
                                fixed={n.fixedLeft || n.fixedRight}
                                left={n.fixedLeftPosition}
                                right={n.fixedRightPosition}
                                groupNumber={n.groupNumber}
                                fixedLeftLast={n.fixedLeftLast}
                                fixedRightFirst={n.fixedRightFirst}
                                tip={headerTip}
                                tipWidth={headerTipWidth}
                                tipHeight={headerTipHeight}
                                headerSlot={n.headerSlot}>
                                {label}
                            </Cell>
                        )
                    })
                }
            </tr>
        )

        return () => (
            <table
                border="0"
                cellpadding="0"
                cellspacing="0"
                style={{
                    width: props.width,
                    tableLayout: 'fixed',
                    borderCollapse: 'separate'
                }}>
                <thead>{ rows.value.map(trNode) }</thead>
            </table>
        )
    }
}