上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    437

    回帖

    943

    积分

    荣誉开发者

    积分
    943

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-11-11 21:21:12 | 显示全部楼层 | 阅读模式

    本帖最后由 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)
    }
    I frequently record, because want to leave something.

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表