From 77afa71ff0e6294cfce600f749c7960539f16124 Mon Sep 17 00:00:00 2001 From: "ray.zh" Date: Wed, 16 Oct 2024 10:46:15 +0800 Subject: [PATCH] =?UTF-8?q?Create=202024-10-16-element=20Table=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=E5=88=97=E5=B1=9E=E6=80=A7=E7=BB=91=E5=AE=9A=E5=85=B3?= =?UTF-8?q?=E7=B3=BB=E5=88=86=E6=9E=90.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...63\347\263\273\345\210\206\346\236\220.md" | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 "_posts/2024-10-16-element Table\350\241\250\346\240\274\345\210\227\345\261\236\346\200\247\347\273\221\345\256\232\345\205\263\347\263\273\345\210\206\346\236\220.md" diff --git "a/_posts/2024-10-16-element Table\350\241\250\346\240\274\345\210\227\345\261\236\346\200\247\347\273\221\345\256\232\345\205\263\347\263\273\345\210\206\346\236\220.md" "b/_posts/2024-10-16-element Table\350\241\250\346\240\274\345\210\227\345\261\236\346\200\247\347\273\221\345\256\232\345\205\263\347\263\273\345\210\206\346\236\220.md" new file mode 100644 index 0000000..73b3c6c --- /dev/null +++ "b/_posts/2024-10-16-element Table\350\241\250\346\240\274\345\210\227\345\261\236\346\200\247\347\273\221\345\256\232\345\205\263\347\263\273\345\210\206\346\236\220.md" @@ -0,0 +1,43 @@ +--- +layout: post +title: "element Table表格列属性绑定关系分析" +date: 2024-10-16 13:29:20 +0800 +categories: + - 逆向 +tags: + - vue + - elementui +--- + +最近有个需求，老板叫采集一个管理后台的表单内容到excel,原系统没有设计导出功能。于是只能爬接口了。 + +爬接口很简单,F12打开浏览器调试面板，点击查询，就可以看到请求表格的内容，但是响应值那么多数据，如何知道UI界面上的列和属性的映射关系呢？ + +这里说个简单可用的方法，针对于VUE2可用。 + +第一步，找到对应table渲染根元素。一般根元素大概特征如下： +1. div标签 +2. 有一个data-v属性 +3. class 包含 +```html +
+``` + +大概布局就像下图了： +![image](https://github.com/user-attachments/assets/c768683c-229c-4337-b69f-5b21a39bfa7b) + + +接下来，通过xpath访问这个table实例(修改class为实际的,然后再console执行): +```js +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列，并打印结果： +```js +a.$children.forEach(item => {console.log(item._props.label, item._props.prop)}) +``` +![image](https://github.com/user-attachments/assets/577ec837-61e5-43b6-9320-91d15fe71c14) + +这样就可以拿到所有列和属性的绑定关系了。