iview表格render

关于 Render
React 和 Vue 2 都使用了 Virtual Dom 技术，Virtual Dom 并不是真正意义上的 DOM，而是一个轻量级的 JavaScript 对象，在状态发生变化时，Virtual Dom 会进行 Diff 运算，来更新只需要被替换的 DOM，而不是全部重绘。与 DOM 操作相比，Virtual Dom 是基于 JavaScript 计算，所以开销会小很多。
在 Vue2 里，就是通过 Render 函数来实现 Virtual Dom 的。

iview3.2.0版本以前表格需要自定义列模板就是需要render来实现
例如

 render: (h, params) => {
      return h('div', [
            h('Icon', {
                     props: {
                            type: 'person'
                     }
            }),
            h('strong', params.row.name)
     ]);
}

有时候觉得很麻烦，变结合Vue.compile写了个简单的编译方法

Vue.prototype.$compile =function(template){
    let result=Vue.compile(template);
    if(result.staticRenderFns.length){
        return result.staticRenderFns[0].call(this);
    }else{
        return result.render.call(this)
    }
};

可能不是满足所有情况,但目前我遇到的不是很复杂的情况都可以满足

render: (h, params) => {
    return this.$compile(`<Row>
        <Col span="6">属性a:${params.row.a}</Col>
        <Col span="8">属性b-c:${params.row.b}-${params.row.c}</Col>
        <Col span="6">区域:${params.row.provinceName + params.row.cityName + params.row.countyName}</Col>
    </Row>`)
}

$compile里面作用域是当前的vue组件,所以如果需要用v-if``v-show等指令的话需要v-if="list[${params.index}].a]" list是表格的data。

当然了iview3.2.0版本后有了slot-scope就好用多了

<Table :columns="columns" :data="data">
    <template slot-scope="{ row, index }" slot="name">
      <Input type="text" v-model="editName" v-if="editIndex === index" />
      <span v-else>{{ row.name }}</span>
    </template>
</Table>