render渲染一个element-UI的table组件

vue组件渲染过程

1，生成render 函数，生成vnode ,将虚拟节点patch(vnode)到绑定元素上。

2，什么是虚拟done?

虚拟DOM也就是我们常说的虚拟节点，他是通过JS的Object对象模拟DOM中的节点，然后在通过特定的render方法将其渲染成真实的DOM节点。

为什么要使用虚拟节点？

频繁的DOM操作会导致大量页面元素的重绘和回流，处于性能优化的考虑我们应该减少重绘和回流的操作。而对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真是DOM上，只需要进行一次重绘和回流，提高了性能。

用render写了一个渲染element-UI的table组件

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    clickHandler() {
      console.log(1);
    },
  },
  render: function(createElement) {
    return createElement('div', {
      attrs: {
        id: "content"
      }
    }, [
      createElement('el-table', {
        style: {
          width: '100%',
        },
        props: {
          data: this.tableData,
        },
        ref: 'extendTable'
      }, [
        createElement('el-table-column', { props: { prop: "date", label: "日期", align: "center" } }),
        createElement('el-table-column', { props: { prop: "name", label: "姓名", align: "center" } }),
        createElement('el-table-column', { props: { prop: "address", label: "地址", align: "center" } }),
        createElement('el-table-column', {
          props: { label: "操作", align: "center" },
          scopedSlots: {
            default: props => createElement('el-button', {
              domProps: {
                innerHTML: "点击"
              },
              on: {
                click: function() {
                  console.log(props, '当前行的值', props.row);
                },
              },
            })
          },
        }),
      ])
    ]
    )
  }
}
</script>


<style scoped>
</style>