el-table

Q：有fixed属性时，无数据时，可能出现底部边框消失的bug

现象：

解决方法：

.el-table__empty-block {
  border-bottom: 1px solid var(--el-table-border-color);
}

el-collapse 折叠面板

Q：标题上有按钮，内容中有dialog。按钮控制dialog的打开和关闭。面板折叠时，dialog不能正常弹出。

<el-collapse v-model="activeNames">
  <el-collapse-item title="title" name="1">
    <template #title>
      title <el-button type="text" @click.stop="dialogVisible = true">新增</el-button>
    </template>

    <el-dialog
      title="title"
      v-model="dialogVisible"
      width="80%"
      :before-close="() => {dialogVisible = false;}"
    >
    </el-dialog>
  </el-collapse-item>
</el-collapse>


const activeNames = ["1"];
const dialogVisible = ref(false);

分析：面板折叠时，.el-collapse-item .el-collapse-item__wrap 的行内样式为 display: none;。el-dialog作为其后代元素，被隐藏了。

解决方案：el-dialog 不作为el-collapse-item的后代元素就可以。

A1：el-dialog 加 append-to-body 属性。

<el-dialog append-to-body></el-dialog>

A2：el-dialog 不嵌套在 el-collapse-item 内部即可。可以并列。

<el-collapse v-model="activeNames">
  <el-collapse-item title="title" name="1"></el-collapse-item>
  <el-dialog></el-dialog>
</el-collapse>

 

国际化

Q：[plugin:vite:import-analysis] No known conditions for "./lib/locale/lang/zh-cn" specifier in "element-plus" package

场景：为了使用锚点（2.6.0）功能，升级了element-plus版本（2.3.6 -> 2.6.1），报错。

解决方案：修改中文的引入路径。

原：import zhCn from 'element-plus/lib/locale/lang/zh-cn'

修改为：

import zhCn from 'element-plus/es/locale/lang/zh-cn'

The End.