antd-design的table默认表格展开，写一个脚本让其默认都展开
本帖最后由 wwwwwllllk 于 2022-11-11 21:22 编辑defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，一般这个时候Table中的数据为空，当我们获取了数据之后再重新加载时，这时已经是第N次渲染了，所以它并没有默认展开。
**解决方案：**
方法一、数据没有加载之前不渲染。
```
this.state.data ? <Table defaultExpandAllRows={...} dataSource={this.state.data} /> : null
```
方法二、给Table设置一个key，获取数据之后改变这个key值，借助了key改变自动变成新的component可以解决这个问题。
```
<Table
key={tableKey}
defaultExpandAllRows={true}
/>
```
上面的内容转自：：https://www.jianshu.com/p/20251885b37c
由于系统展开表格的数据是重新调了一个接口，系统里面如果我要全部展开有点麻烦，所有就想写个脚本来实现它。
写的过程遇到的问题。
# 1. @match写localhost有时候能匹配到有时候匹配不到，(改成127.0.0.1可以解决)
# 2. 找触发的dom元素浪费了点时间
# 3.因为table数据比较多，然后实际脚本运行过程中会重复点击一个地方，发现是因为我点击的过程鼠标滚动了数据，而它的点击是通过获取domcument的位置来触发的，一滚动位置发生变化导致的。
# 4.因为是响应式页面，所以我要全局匹配，然后判断具体的url地址然后执行逻辑代码。所以我们要setInterval让其一直执行
```js
// ==UserScript==
// @name 表格
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptiontry to take over the world!
// @author You
// @match http://127.0.0.1:8080/
// @icon https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @grant none
// ==/UserScript==
(function() {
'use strict';
let zhixing = setInterval(() => {
if(window.location.href == 'http://127.0.0.0:8080/#/system'){
let a = document.getElementsByClassName('ant-table-row-expand-icon')
const zkButton = document.createElement('button')
zkButton.innerText = '展开'
if(document.getElementsByClassName('ant-btn ant-btn-primary')){
if(document.getElementsByClassName('zkButton').length == 0){
document.getElementsByClassName('ant-btn ant-btn-primary').after(zkButton)
}
}
zkButton.setAttribute('class','zkButton') // 这个属性其实没有用到了
zkButton.onclick = function(){
let i = 0
let timer = setInterval(() =>{
if(i == a.length){
alert('操作完成')
clearInterval(timer)
return
}
a.click()
i++
},1000)
}
}
},3000)
})();
```
# 这是在控制台测试的代码
```js
let a =$$('.ant-table-row-expand-icon')
const zkButton = document.createElement('button')
zkButton.innerText = '展开'
$('.ant-btn.ant-btn-primary').after(zkButton)
zkButton.setAttribute('class','zkButton') // 这个属性其实没有用到了
zkButton.onclick = function(){
let i = 0
let timer = setInterval(() =>{
if(i == a.length){
console.log('操作完成')
clearInterval(timer)
return
}
a.click()
i++
},1000)
}
```
页:
[1]