elementui table的折叠(展开、收缩)图标移位的方法

前言:今天又是给csdn上的复读机们恶心的一天,一查,全是type=“”,type=“:”,我不知道,难道你们没发现放到最后一列的时候折叠的缩进没了?干!

解决方法

.el-table [class*="el-table__row--level"] .el-table__expand-icon {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  right: -785px;
  top: 15px;
  z-index: 999;
}

绝对定位把图标移位就行。能保证折叠的逻辑运行正常。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你想要在 ElementUI-Plus 的 Table 树形结构中进行懒加载并判断是否有子节点数据,可以使用 `lazy` 属性和 `load` 方法实现。具体实现步骤如下: 1. 在 Table 组件中设置 `:lazy="true"`,开启懒加载模式。 2. 在 Table 组件中设置 `:load="loadData"`,指定加载数据的方法。 3. 在 `loadData` 方法中,根据当前节点的 `level` 和 `expanded` 状态来判断是否需要加载该节点的子节点数据。 4. 如果需要加载子节点数据,可以使用异步请求获取数据,并在回调中将数据作为参数传递给 `resolve` 方法。如果不需要加载子节点数据,可以直接调用 `resolve([])` 方法返回一个空数组。 下面是一个示例代码,帮助你更好地理解如何实现这个功能: ```vue <template> <el-table :data="data" :lazy="true" :load="loadData" tree-key="id" :tree-props="{children: 'children'}" > <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="状态" prop="status"></el-table-column> </el-table> </template> <script> export default { data() { return { data: [] } }, methods: { loadData(node, resolve) { if (node.level === 0) { // 根节点的数据 this.$http .get('/api/data') .then(response => { resolve(response.data) }) } else { // 非根节点的数据 if (node.expanded) { // 当前节点已经展开,需要加载子节点数据 this.$http .get(`/api/data/${node.data.id}`) .then(response => { resolve(response.data.children) }) } else { // 当前节点没有展开,无需加载子节点数据 resolve([]) } } } } } </script> ``` 在这个示例中,我们使用了 `resolve` 方法来返回异步获取的子节点数据或空数组。同时,我们还使用了 `node.level` 和 `node.expanded` 属性来判断当前节点的状态,从而决定是否需要加载子节点数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值