antd-design的table默认表格展开，写一个脚本让其默认都展开

wwwwwllllk

本帖最后由 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让其一直执行

// ==UserScript==
// @name         表格
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try 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')[0].after(zkButton)
             }
          }
          zkButton.setAttribute('class','zkButton')    // 这个属性其实没有用到了
          zkButton.onclick = function(){
              let i = 0
              let timer = setInterval(() =>{
                  if(i == a.length){
                      alert('操作完成')
                      clearInterval(timer)
                      return
                  }
                  a[i].click()
                  i++
              },1000)
              }
      }
  },3000)
})();

这是在控制台测试的代码

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[i].click()
    i++  
  },1000)
}