ElementUI Expand_elementui expand+fixed会重复渲染

解决方案简述

针对ElementUI中expand与fixed组合使用时出现的重复渲染问题，核心思路是优化表格结构和事件监听机制。通过移除不必要的重复监听、合理设置table-column属性、以及控制展开行的状态管理，可以有效避免重复渲染现象。

1. 问题分析

ElementUI 的 Table 组件在使用expandable（可展开行）+ fixed（固定列）组合时，如果配置不当确实容易导致重复渲染的问题。主要原因是：
- 展开行与固定列之间的交互逻辑较为复杂
- 缺少对展开状态的有效管理
- 事件监听器未能及时销毁或解绑

2. 解决方案一：优化事件监听

vue

  
    
      
        <div>
          <!-- 展开内容 -->
        </div>
      
    
    <!-- 其他列定义 -->
  
</p>


export default {
  data() {
    return {
      tableData: [],
      expandedRows: []
    }
  },
  methods: {
    handleRowClick(row) {
      const index = this.expandedRows.indexOf(row.id);
      if (index === -1) {
        this.expandedRows.push(row.id);
      } else {
        this.expandedRows.splice(index, 1);
      }
    }
  }
}


<p>

该方案通过手动维护一个expandedRows数组来记录当前展开的行，避免了默认expand事件的频繁触发。

3. 解决方案二：使用slot-scope优化

vue

  
    
      
        <div>
          <!-- 展开内容 -->
        </div>
      
    
  
</p>


export default {
  data() {
    return {
      loading: false,
      tableData: []
    }
  },
  mounted() {
    // 加载数据前设置loading为true
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      // 模拟数据加载完成
    }, 1000)
  }
}


<p>

该方案通过使用slot-scope结合v-if条件渲染，确保只有当数据加载完成且行处于展开状态时才渲染内容，避免了不必要的渲染。

4. 解决方案三：使用key强制刷新

vue

  
    
      
        <!-- 展开内容 -->
      
    
  
</p>


export default {
  data() {
    return {
      tableData: [],
      tableKey: 0
    }
  },
  methods: {
    refreshTable() {
      this.tableKey += 1;
    }
  }
}


<p>

当需要强制刷新表格时，可以通过改变tableKey的值来触发组件重新渲染，从而避免重复渲染问题。

以上三种方案可以根据具体业务场景选择使用，建议结合实际情况进行测试和调整，以找到最适合的解决方案。