el-table 实现隐藏列切换时引起列表重绘抖动

Posted 2023-04-28

参考技术A 工作中用到了elementui table 去实现列表显示数据。由于table的列数过多，产品要求可以让用户自己设置显示的列数。于是利用v-if 结合el-table-column实现了table的自定义列数显示。虽然功能实现了，但在操作某一列数据由隐藏变为显示的瞬间，页面会有抖动的现象。经过一段时间的查找，发现elementui在重新渲染table时td内部的div高度被重新计算了（div高度=table容器高度/行数），进而导致整个table的高度变化，给人的感觉table在抖动。解决的版本就是给td内部的div固定一个高度。该div有自己的class属性.el-table .cell 。重写该属性的样式表.el-table .cellheight: 20px !important;，问题得以解决。

如何在 SwiftUI 中触发状态更改/重绘切换更改

【中文标题】如何在 SwiftUI 中触发状态更改/重绘切换更改

【英文标题】：How trigger state change / redraw on toggle change in SwiftUI

【发布时间】：2021-07-05 03:57:45

【问题描述】：

我有一些项目并在视图上显示项目计数。我有一个切换，可以减少计数/项目列表中显示的内容。当我使用切换时，项目计数不会更新。我在这里想念什么？为简洁起见减少/模拟示例。

struct SampleView: View 

    @State var items:[Item]
    @State var easyMode:Bool = false
    @State var filtered:[Item] = []

    init(...) 
        // Fill items and filtered array
    

    var body: some View 

            Toggle(isOn: $easyMode, label:
                Text("Easy mode")
            )
            .onChange(of: self.easyMode, perform:  value in
                filtered = filterItems()
                //         ^^ This is running but not
                //            updating stuff
            )
            // This text field does not update when filter changes
            Text(String(filtered.count) + " items")
    

我尝试让 filterItems 在 @State var countLabel:String 中生成文本字符串并更新文本，但存在后台线程问题。所以我认为 filterItems 没有做任何事情有一些奇怪之处，因为它在一个单独的线程上。我错过了什么？谢谢！！

【参考方案1】：

你可以试试这个：

.onChange(of: self.easyMode)  value in
    DispatchQueue.main.async 
       filtered = filterItems()
    

【参考方案2】：

我刚刚获取了您的代码并使其可编译。

struct SOTest: View 
    @State var items:[String]
    @State var easyMode:Bool = false
    @State var filtered: [String]
    
    init() 
        let tmp = ["1","2_","3","4_","5_","6"]
        self.items = tmp
        self.filtered = tmp.filterStrings()
    

    var body: some View 

            Toggle(isOn: $easyMode, label:
                Text("Easy mode")
            )
            .onChange(of: self.easyMode, perform:  value in
                
                if value 
                    filtered = items.filterStrings()
                 else 
                    filtered = items
                
            )
            Text(String(filtered.count) + " items")
    


extension Array where Element == String 
    func filterStrings() -> [String] 
        self.filter $0.contains("_") 
    

一切正常。

可能您在原始代码中做错了什么，在您的问题中您丢失了一些重要的东西。

尝试在这里查看我的答案，也许您会找到隐藏问题的解决方案：SwiftUI: Forcing an Update

并且....顺便说一句，这里有更简单的方法：

struct SOTest: View 
    @State var items:[String]
    @State var easyMode:Bool = false
    @State var filtered: [String]

    init() 
        let tmp = ["1","2_","3","4_","5_","6"]
        self.items = tmp
        self.filtered = tmp.filterStrings()
    

    var body: some View 
        Toggle(isOn: $easyMode, label:
            Text("Easy mode")
        )
        
        if easyMode 
            Text(String(filtered.count) + " items")
        
        else 
            Text(String(items.count) + " items")
        
    

【讨论】：

哇！太棒了。嗯，这令人困惑，我花了一个小时试图找出它为什么不起作用....我正在慢慢地将代码从真实项目复制并粘贴到测试项目中，以找出问题所在