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

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

let tableColumn = {
  template: `<div></div>`,
  props: ['label', 'prop', 'width', "fixed", 'sortable', 'minWidth', 'align'],
  name: 'table-column',
  computed: {
    owner() {// 寻找拥有table的外层组件
      return this.$parent;
    }
  },
  created() {
    // 生成列定义
    let column = {
      label: this.label,//列表头显示名称
      prop: this.prop,//列用到的字段名称,
      width: this.width, // 列宽
      defaultWidth: '30vw',
      renderCell: null,//渲染用的方法
      fixed: this.fixed !== undefined ? true : false,
      minWidth: this.minWidth,
      align: this.align ? this.align : this.fixed ? 'left' : 'right',
      sortable: this.sortable !== undefined ? true : false
    };
    let renderCell = column.renderCell;
    let _self = this;
    // 生成列的渲染方法
    column.renderCell = function (createElement, data) {
      // 有插槽的情况
      if (_self.$scopedSlots.default) {
        //渲染作用域插槽
        renderCell = () => _self.$scopedSlots.default(data);
        //使用效果:
        //<template slot-scope="{row}">
        //<span>{{row.address}}</span>
        //</template>
      } else {
        // 没有插槽的情况
        renderCell = function () {
          let { row } = data
          let prop = column.prop;
          // 直接返回时间紧
          return row[prop]
        }
        /*实现效果:<div className="cell">张三</div>*/
      }
      //生成一个render函数
      return createElement('div', {
        'class': {
          'table-cell': true
        },
      }, renderCell())
    }
    //生成列定义
    this.columnConfig = column
  },
  mounted() {
    // 将列定义添加到状态管理器中,供 table-body table-header 使用
    this.owner.store.commit('insertColumn', this.columnConfig)
  }
}

export default tableColumn