#

zwl

2025-10-21 0aa6032c3ae51b605c9782f6397d41f86af5a6d5

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
    <!-- #ifdef H5 -->
    <thead class="uni-table-thead">
        <tr class="uni-table-tr">
            <th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
                <table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
            </th>
        </tr>
        <slot></slot>
    </thead>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="uni-table-thead"><slot></slot></view>
    <!-- #endif -->
</template>
 
<script>
import tableCheckbox from '../uni-tr/table-checkbox.vue'
export default {
    name: 'uniThead',
    components: {
        tableCheckbox
    },
    options: {
        virtualHost: true
    },
    data() {
        return {
            border: false,
            selection: false,
            rowspan: 1,
            indeterminate: false,
            checked: false
        }
    },
    created() {
        this.root = this.getTable()
        // #ifdef H5
        this.root.theadChildren = this
        // #endif
        this.border = this.root.border
        this.selection = this.root.type
    },
    methods: {
        init(self) {
            this.rowspan++
        },
        checkboxSelected(e) {
            this.indeterminate = false
            const backIndexData = this.root.backIndexData
            const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
            if (backIndexData.length === data.length) {
                this.checked = false
                this.root.clearSelection()
            } else {
                this.checked = true
                this.root.selectionAll()
            }
        },
        /**
         * 获取父元素实例
         */
        getTable(name = 'uniTable') {
            let parent = this.$parent
            let parentName = parent.$options.name
            while (parentName !== name) {
                parent = parent.$parent
                if (!parent) return false
                parentName = parent.$options.name
            }
            return parent
        }
    }
}
</script>
 
<style lang="scss">
$border-color: #ebeef5;
 
.uni-table-thead {
    display: table-header-group;
}
 
.uni-table-tr {
    /* #ifndef APP-NVUE */
    display: table-row;
    transition: all 0.3s;
    box-sizing: border-box;
    /* #endif */
    border: 1px red solid;
    background-color: #fafafa;
}
 
.checkbox {
    padding: 0 8px;
    width: 26px;
    padding-left: 12px;
    /* #ifndef APP-NVUE */
    display: table-cell;
    vertical-align: middle;
    /* #endif */
    color: #333;
    font-weight: 500;
    border-bottom: 1px $border-color solid;
    font-size: 14px;
    // text-align: center;
}
 
.tr-table--border {
    border-right: 1px $border-color solid;
}
 
/* #ifndef APP-NVUE */
.uni-table-tr {
    ::v-deep .uni-table-th {
        &.table--border:last-child {
            // border-right: none;
        }
    }
 
    ::v-deep .uni-table-td {
        &.table--border:last-child {
            // border-right: none;
        }
    }
}
 
/* #endif */
</style>