iView表格工具使用reader

iView表格优势

Vue组件或UI里表格工具很多，主要分为2种

• 一种只是将表格工具美化，表格视觉上也很清楚，如Elemnet的表格
• 另一种是将数据传入，表格格式化完全靠参数。

iView表格属于后者,iView表格里列描述数据对象有一个render和renderHeader,分别是单元格渲染和表头渲染。

• iView表格里的render和Vue里的渲染函数很相似。
  -- 文档里的说明是

自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引

使用方法是

render:(h,params)=>{
    return h('span',params.row.title);
}

其中 column内容就是你自已定议的title 、width 、key 和其它值，一般用的较少，row就是当前行的数据。
这里主要是h函数，官方的示例里只有最常用的东西，相关学习视频要钱。我找了找VUE里面渲染函数，比较全面。
关于VUE rander 函数的 createElement参数，这个createElement相当于iView里面的h,都是函数。
createElement函数里面三个参数分别是 标签(也可能是模版，我是这么理解)，模板相关属性的数据对象、内容（也是子节点）。
官方示例

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数，必要参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

下面是模板相关属性的数据对象具体参数设置
使用中的经验

• 图片和超连接的src 和 herf等属性放在 attrs里面。

{
  // 和`v-bind:class`一样的 API
  // 接收一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  // 接收一个字符串、对象或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

对于自定义组件中要用v-model

props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}