#

whycq

2023-05-06 d44a9d2e34f17ba2ad9d8ad915214d86de2e8e00

 uni_modules/uni-table/components/uni-thead/uni-thead.vue

New file
@@ -0,0 +1,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>