标签 element-plus 下的文章

UPDATE 2023-05-04

某些情况下，css 属性inset 不被支持，造成本文介绍的方法失效。此时只要用 left、top 加上宽高替换 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