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

403 阅读2分钟

defaultExpandAllRows这个属性仅仅是用来设置默认值的,只在第一次渲染的时候起作用,一般这个时候Table中的数据为空,当我们获取了数据之后再重新加载时,这时已经是第N次渲染了,所以它并没有默认展开。

解决方案:
方法一、数据没有加载之前不渲染。

this.state.data ? <Table defaultExpandAllRows={...} dataSource={this.state.data} /> : null

方法二、给Table设置一个key,获取数据之后改变这个key值,借助了key改变自动变成新的component可以解决这个问题。

<Table
  key={tableKey}
  defaultExpandAllRows={true}
/>

上面的内容转自:www.jianshu.com/p/20251885b…

由于系统展开表格的数据是重新调了一个接口,系统里面如果我要全部展开有点麻烦,所有就想写个脚本来实现它。

写的过程遇到的问题。

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)
}