标签 element-plus 下的文章

UPDATE 2023-05-04

某些情况下,css 属性inset 不被支持,造成本文介绍的方法失效。此时只要用 lefttop 加上宽高替换 inset 就好了。下面的代码已经修改。


Element Plus 的 Table 组件文档写道

只要在 el-table 元素中定义了 height 属性,即可实现固定表头的表格,而不需要额外的代码。

可是有几个场景能知道 Table 的固定高度?所以文档中的方法不太可行。

尝试使用 :deep() 深度选择器改变 el-table 的样式,使它形成 overflow-y: auto 的区域,就会触发一个非常奇怪的行为:el-table 的宽度会一直慢慢变大!因为看起来是脚本控制的,也就没有精力深究。

最后还是在 CSDN 上找到的办法,使用绝对定位。我的实践,下面的代码是最方便的:

HTML:

<div class="box">
    <div class="menu">菜单之类的顶部区域,不需要可以去掉</div>
    <div class="table-box">
        <el-table class="el-table"></el-table>
    </div>
</div>

CSS:

.box {
    display: flex;
    flex-direction: column;
}

.menu {
    flex: none;
    height: 100px;
}

.table-box {
    flex: auto;
    overflow: hidden;
    position: relative;
}

.el-table {
    position: absolute;
    - inset: 0;
    + left: 0;
    + top: 0;
    + width: 100%;
    + height: 100%;
}

现在,el-table 就会在固定表头的同时,使用内置的 el-scrollbar 来滚动表格内容了。

End

element-plus 的图标其实是一个个的组件:

JavaScript:

import { IconName, IconName2 } from '@element-plus/icons-vue';

Template:

<el-icon>
    <IconName/>
</el-icon>

使用 :is 切换组件:

<component :is="bool ? IconName : IconName2"></component>

然而 :is 的值必须是引入的组件,不能是字符串,否则就会渲染成这个样子:

<iconname></iconname>

如果菜单结构单独放在一个文件中,比如 menu.js

export default [
    {
        name: 'Menu 1',
        icon: 'IconName'
    }
]

这里的 icon的值就不能是字符串,需要是一个组件对象的引用。这就需要先在 menu.js 中引入图标组件:

import { IconName } from '@element-plus/icons-vue';

然后将组件传给 icon

export default [
    {
        name: 'Menu 1',
        icon: IconName
    }
]

这样,就能够在组件中正确显示图标了。当然,这时候组件中就不需要再引入图标了。


End