fixedColumns-auto-height.js 2.28 KB
Newer Older
liang ce committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index';
import '../assets/index.less';

var data = [{ a: '123', b: 'xxxxxxxx', d: 3, key: '1', title: 'hello' }, { a: 'cdd', b: 'edd12221', d: 3, key: '2', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '3', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '4', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '5', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '6', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '7', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '8', title: 'hello' }, { a: '133', c: 'edd12221', d: 2, key: '9', title: 'hello' }];
export default {
  data: function data() {
    return {
      show: false
    };
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];

    var columns = [{ title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' }, { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' }, { title: 'title3', dataIndex: 'c', key: 'c' }, { title: 'title4', dataIndex: 'b', key: 'd' }, { title: 'title5', dataIndex: 'b', key: 'e' }, {
      title: 'title6',
      dataIndex: 'b',
      key: 'f',
      customRender: function customRender() {
        return h(
          'div',
          { style: { height: '40px', lineHeight: '40px' } },
          ['\u6211\u5F88\u9AD8']
        );
      }
    }, { title: 'title7', dataIndex: 'b', key: 'g' }, { title: 'title8', dataIndex: 'b', key: 'h' }, { title: 'title9', dataIndex: 'b', key: 'i' }, { title: 'title10', dataIndex: 'b', key: 'j' }, { title: 'title11', dataIndex: 'b', key: 'k' }, { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' }];
    return h(
      'div',
      { style: { width: '800px' } },
      [h('h2', ['Fixed columns']), h(
        'button',
        {
          on: {
            'click': function click() {
              _this.show = true;
            }
          }
        },
        ['show Table']
      ), this.show ? h(Table, {
        attrs: {
          columns: columns,
          expandedRowRender: function expandedRowRender(record) {
            return record.title;
          },
          expandIconAsCell: true,
          scroll: { x: 1200 },
          data: data
        }
      }) : null]
    );
  }
};