element Table表格列属性绑定关系分析

图片好像显示不出来，原文链接：
http://blog.mtils.com/posts/element-Table%E8%A1%A8%E6%A0%BC%E5%88%97%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A%E5%85%B3%E7%B3%BB%E5%88%86%E6%9E%90/

最近有个需求，老板叫采集一个管理后台的表单内容到excel,原系统没有设计导出功能。于是只能爬接口了。

爬接口很简单,F12打开浏览器调试面板，点击查询，就可以看到请求表格的内容，但是响应值那么多数据，如何知道UI界面上的列和属性的映射关系呢？

这里说个简单可用的方法，针对于VUE2可用。

第一步，找到对应table渲染根元素。一般根元素大概特征如下：

1. div标签
2. 有一个data-v属性
3. class 包含

<div data-v-4c7dc3fa="" class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition el-table--medium" style="height: 100%;">

大概布局就像下图了：

接下来，通过xpath访问这个table实例(修改class为实际的,然后再console执行):

a = $x("//div[@class='el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition el-table--medium']")[0].__vue__

这里把table实例抓出来赋予了a, 可以自己看a对象的结构去拿数据。

在实例中遍历所有colum列，并打印结果：

a.$children.forEach(item => {console.log(item._props.label, item._props.prop)})

这样就可以拿到所有列和属性的绑定关系了。