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

<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: 32rpx;
  // 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>