el-table 树形数据 当展开的时候没有数据 展开的icon图标就隐藏了

el-table 树形数据 当展开的时候没有数据 展开的icon图标就隐藏了
怎么修改 不论有没有数据 图标都不隐藏

img

img

用 scope 在里面判断


<el-table-column label="名称">
  <template slot-scope="scope">
    <span v-if="scope.row.children && scope.row.children.length > 0">
      <i class="el-icon-caret-right" v-if="!scope.row.expanded" @click="handleExpand(scope.row)"></i>
      <i class="el-icon-caret-down" v-else @click="handleExpand(scope.row)"></i>
    </span>
    <span v-else>
      <i class="el-icon-caret-right" @click="handleExpand(scope.row)"></i>
    </span>
    {{ scope.row.name }}
  </template>
</el-table-column>

然后，在methods中实现handleExpand方法，根据row的expanded属性来切换展开状态

leaf == true 是显示icon

  • 这篇博客也许可以解决你的问题👉 ：el-table 表头添加icon图标并悬浮提示
  • 以下回答由chatgpt基于相关博客总结生成:

    根据给出的参考资料，问题的核心是在el-table树形数据中展开节点时，如果该节点没有子节点，展开的图标会隐藏起来。需要修改这个行为，使得无论节点是否有子节点，展开的图标都不隐藏。

    首先，根据参考资料中的要求，需要在el-table组件上添加lazy属性和load方法，并设置tree-props属性来定义树形结构的属性，如下所示：

    <el-table
  lazy
  :load="loadNode"
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
  <!-- 表格列 -->
</el-table>

    然后，在Vue实例中定义loadNode方法，该方法会在用户点击展开图标时被调用，用于加载该节点的子节点数据。在该方法中，首先判断当前节点的层级是否大于等于1，然后根据需要传递给后端的参数进行设置，并通过后端接口获取子节点数据并调用resolve方法返回数据，如下所示：

    methods: {
  loadNode(row, treeNode, resolve) {
    if (row.level >= 1) {
      // 根据需要传递给后端的参数进行设置
      // state.tableData.param.level = row.level + 1;
      // state.tableData.param.code = row.code;

      // 调用后端接口获取子节点数据
      // Query(state.tableData.param).then((response) => {
      //   resolve(response);
      // });

      // 直接返回测试数据
      resolve([]);
    }
  },
},

    上述代码中，根据注释部分所示，需要根据实际情况设置传递给后端的参数。然后，通过后端接口获取子节点数据，并将数据通过调用resolve方法返回。如果没有可用的后端接口，可以直接返回一个空数组进行测试。

    通过以上步骤，就能实现在el-table树形数据中展开节点时无论是否有子节点，展开的图标都不会隐藏的功能。如果还有其他问题，请告诉我。

数据中hasChildren设为false

img