el-skeleton-item 设置高度

element-plus 骨架屏中每一项的高度可以通过 el-skeleton-item 组件的 height 属性来设置。height 属性支持以下类型的值：

- Number：设置固定高度值，如 height="50"
- String：设置高度的百分比，如 height="50%"

你可以在使用 el-skeleton-item 组件时，通过设置 height 属性来更改其高度。例如：

<template>
  <el-skeleton>
    <el-skeleton-item :height="50"></el-skeleton-item>
  </el-skeleton>
</template>

上面的代码将 el-skeleton-item 组件的高度设置为 50px。如果你想将 el-skeleton-item 组件的高度设置为其父元素高度的一半，可以使用百分比来设置：

<template>
  <div style="height: 100px;">
    <el-skeleton>
      <el-skeleton-item :height="'50%'"></el-skeleton-item>
    </el-skeleton>
  </div>
</template>

上面的代码将 el-skeleton-item 组件的高度设置为其父元素高度的一半，即 50px。

相关问题

el-table如何使用el-skeleton

el-table是饿了么UI库中的一个表格组件，而el-skeleton是饿了么UI库中的一个骨架屏组件。在使用el-table时，我们可以结合el-skeleton来增强用户体验。具体实现方式如下：

1. 在el-table的外层包裹一个el-skeleton，并将其隐藏起来
2. 在数据加载前，显示el-skeleton，并隐藏el-table
3. 数据加载完成后，隐藏el-skeleton并显示el-table

以下是示例代码：

<template>
  <div>
    <el-skeleton :loading="loading" :animated="true">
      <el-table v-if="!loading" :data="tableData" style="width: 100%">
        <!-- table columns -->
      </el-table>
    </el-skeleton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      tableData: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableData = [
        // table data
      ];
      this.loading = false;
    }, 2000);
  }
};
</script>

以上代码中，在组件加载时，我们设置了loading为true，并在mounted钩子函数中模拟了一个2秒钟的数据加载过程。在数据加载前，el-table是不可见的，而el-skeleton是可见的。当数据加载完成后，我们将el-table显示出来，并将el-skeleton隐藏。这样就可以实现在数据加载过程中显示一个骨架屏，增强用户体验。

van-skeleton

van-skeleton是vant插件中的一个组件，用于实现页面骨架屏效果。骨架屏是一种在页面加载过程中展示页面大体结构的技术，可以避免用户看到长时间的白页，同时提供流畅的视觉效果，减小用户认为页面出错而离开的可能性。

在vant框架中，可以通过手写HTML和CSS来自定义骨架屏的样式和布局。这种方式可以复刻页面的真实样式，但如果页面样式发生改变，就需要重新修改骨架屏的样式和布局，增加了维护成本。还有一个方案是使用vue-skeleton-webpack-plugin插件，结合vueSSR和webpack，在构建时渲染预先编写的vue骨架屏组件，并将生成的DOM节点和相关样式插入到最终输出的HTML中。

另外，还有一种方案是自动生成静态骨架屏。具体实现细节可以参考引用中提供的链接。总的来说，van-skeleton是vant插件中用于实现骨架屏效果的组件，可以通过手写HTML和CSS、vue-skeleton-webpack-plugin插件以及自动生成静态骨架屏等方式来创建骨架屏效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [骨架屏（vant插件）](https://blog.csdn.net/qq_37034928/article/details/95939302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [前端骨架屏应用](https://blog.csdn.net/kiscon/article/details/128190949)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]