封装这么久的组件，当然要使用起来才知道的到底好不好用，关于引用方面，首先要在引用的地方进行组件注册，如果全局注册过了，可以忽略在局部注册，关于组件的注册这里就不做详解了(oﾟ▽ﾟ)o 。我使用了全局注册，所以这里是直接引入我自己封装好的组件。
<template> <div> <xd-table :table-list="tableData" :header="header"></xd-table> </div> </template> <script> export default { name: "HelloWorld", data() { return { header: [ { prop: "w", label: "w" }, { prop: "x", label: "x", formatter: (row) => { return row.x.toFixed(3); }, }, { prop: "d", label: "d", formatter: (row) => { return row.d.toFixed(2); }, }, { label: "操作", render: (h, data) => { return ( <el-button type="primary" onClick={() => { this.handleClick(data.row); }} > 点我获取行数据 </el-button> ); }, }, ], tableData: [ { w: 1, x: 99.25123, d: 0.23892 }, { w: 1, x: 255.6666, d: 0.99134 }, ], }; }, methods: { handleClick(row) { console.log(row); }, }, }; </script>引用组件之前一定要记得先注册，这里我只使用了几个属性，其他属性没有使用，因为是demo，主要还是展示render内嵌代码的方法，还有一个就是官方formatter方法的使用。
有一个需要注意点就是render内我使用了JSX模板语法这里需要在VUE项目中单独去配置一下JSX语法，如果不想使用JSX，直接写也可以，因为不使用JSX语法写出来的内嵌模板代码比较难读所以我就不展示了，个人建议还是使用JSX语法，虽然和原生vue有些地方使用方法不太一样。
效果截图
这次封装vue组件，花了我将近半个月的时间，从刚开始的接触到发现bug然后去修改，来来回回终于精简封装出现在这个二次封装的组件，可能对于熟悉vue和element的人来说这个封装其实很简单，但是对于我来说这个算是我这段实习期封装的比较好的一个组件了吧，当然除了封装这个组件还有别的事在做，不可能放着公司的活不干（哈哈哈哈︿(￣︶￣)︿），总之在封装组件过程中学习到了不少东西，也算是一个大大的进步，于是来写一篇博客来记录一下。