123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <template>
-
- <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>
-
-
- <view class="uni-table-thead"><slot></slot></view>
-
- </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()
-
- this.root.theadChildren = this
-
- 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>
|