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

Posted 2022-11-29 晚星@

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>