el-table表格树形结构和懒加载结合:当父节点渲染的东西和子节点渲染的东西不一样

本文探讨如何在Element UI的el-table组件中实现树形结构与懒加载的结合。通过监听@expand-change事件处理展开操作,动态加载子数据,并根据需求定制父节点和子节点的显示内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

树结构展开:事件 @expand-change='handledetail'

设置:type="expand"

<el-table :data="videoList.content" row-key="id" style="width: 100%;background-color: #000; " :show-header='false' @expand-change='handledetail'>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="background-color: #292b35;">
              子页内容
            </div>
          </template>
        </el-table-column>
        <el-table-column>
主页内容
         </el-table-column>

事件处理:

   res.content = res.content.map((item, index) => {

            item.keyId = index;

            item.childrenData = []; // 添加子表格数据

            return item;

          });

获取子数据:其中有判断展开的事件

   handledetail(row, expandedRows) {
      if (this.tableLength - expandedRows.length == 1) {
        this.tableLength = expandedRows.length + 2;
        this.$set(row, "loading", true);
        const params = { courseId: row.id };
        queryItem(params).then((res) => {
          const taskData = res;
          console.log(taskData, "视频子数据");
          // 遍历父层表格数据
          this.videoList.content.forEach((temp, index) => {
            console.log(temp, "====46578=");
            // 找到当前展开的行,把获取到的数据赋值进去
            if (temp.id === row.id) {
              this.videoList.content[index].childrenData = taskData || [];
            }
          });

          this.$set(row, "loading", false);
        });
      } else {
        this.tableLength = expandedRows.length + 2;
        console.log("关闭", "=====");
      }
    },

### el-table 树形结构子节点父节点字段一致的解决方案 对于 `el-table` 的树形结构,当遇到子节点父节点字段一致的情况时,可以通过自定义渲染函数来处理不同类型的数据显示。具体方法如下: #### 使用作用域插槽定制列显示 通过 Vue 提供的作用域插槽功能,可以在表格内针对每一列的数据进行个性化展示逻辑编写。 ```html <template> <el-table :data="tableData" row-key="id" lazy :load="load"> <!-- 定义一列用于呈现名称 --> <el-table-column label="Name"> <template slot-scope="{row}"> {{ getFieldName(row, 'name') }} </template> </el-table-column> <!-- 更多列可以根据需求添加 --> </el-table> </template> ``` 为了区分并正确获取父级或子级特有的属性名,在 JavaScript 方法里加入判断机制: ```javascript methods: { // 判断当前行为父节点还是子节点,并返回对应的字段值 getFieldName(row, fieldKey){ let result; if (row.hasChildren || row.isChildren){ switch(fieldKey){ case "name": result = row.type === 'parent'? row.parentName : row.childName; break; default: result = ''; } return result; } return row[fieldKey]; }, } ``` 上述代码片段展示了如何利用条件语句根据不同类型(即是否有孩子节点或是属于孩子的行)动态调整所要访问的对象键路径[^1]。 此外,还可以进一步优化样式以增强用户体验,比如给不同的级别应用特定的颜色背景以便于视觉上的区别对待。 关于是否能监听到子组件生命周期的问题,通常情况下父组件可以直接观察其内部嵌套的小部件状态变化;然而这取决于框架的具体实现方式以及双方之间建立通信的方法[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值