vue-mobile-table/src/components/listTable/tableHeader.js

移动端表格、列表组件，支持虚拟滚动

import commonMixIn from './mixin'
let tableHeader = {
  name: 'table-header',
  mixins:[commonMixIn],
  props: ['store', 'fixed', 'sortType', 'sortField', "defaultFixItemWidth", "borderConfig", "paddingConfig", "sortableConfig"],
  computed: {
    columns() { //获取状态管理器中的列定义
      return this.store.states.columns;
    }
  },
  data() {
    return {
      iSortField: '',
      iSortType: ''
    }
  },
  watch: {
    sortType(newV) {
      this.iSortType = newV
    },
    sortField(newV) {
      this.iSortField = newV
    }
  },
  methods: {
    trigger(sortField, sortable) {
      if (!sortable) {
        return
      }
      switch (this.iSortType) {
        case '':
          this.iSortType = "desc";
          break;
        case "desc":
          this.iSortType = "asc";
          break;
        case "asc":
          this.iSortType = ""
          break
      }
      this.iSortField = sortField
      this.$emit("changeSort", this.iSortType, this.iSortField)
    },
  },
  render(createElement) { //通过createElement创建vNode
    console.log(this)
    return createElement('div', {
      class: {
        "vue-mobile-table-header-wrap": true,

      },
      style: {
        borderBottom: this.borderConfig.headerBorder ? `1px ${this.borderConfig.borderType} ${this.borderConfig.color}` : 'none',
      },
    }, this.columns.filter(column => this.fixed ? column.fixed : !column.fixed).map((column) => {
      return createElement('div', {
        class: {
          "vue-mobile-table-header-item": true,
          "vue-mobile-table-header-fix-item": column.fixed
        },
        style: {
          flex: this.getFlex(column),
          width: this.getWidth(column, this.defaultFixItemWidth),
          minWidth: this.getMinWidth(column),
          justifyContent: this.getAlign(column.align),
        },
        on: {
          click: () => {
            this.trigger(column.prop, column.sortable)
          }
        },
      }, [createElement('div', column.label), column.sortable ? createElement("table-sort-btn", {
        props: {
          activeSortIcon: column.prop === this.iSortField ? this.iSortType : '',
          sortableConfig: this.sortableConfig
        }
      }) : null])
    }))
  }
}

export default tableHeader