element-ui坑点

cxllOnce

已于 2025-02-07 12:47:36 修改

阅读量890

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element-ui vue-cli 文章标签： ui vue.js 前端

于 2020-10-15 15:20:41 首次发布

本文链接：https://blog.csdn.net/cxllRNGNB/article/details/109097958

vue-cli 同时被 2 个专栏收录

8 篇文章

订阅专栏

element-ui

4 篇文章

订阅专栏

本文列举了在使用Element-UI组件库时遇到的一些坑点，包括el-popconfirm气泡确认框的确认和取消按钮文字设置、触发显示的HTML标签要求，以及el-table边框颜色修改的方法。此外，还提到了el-select组件value值的问题，指出不能设置为对象，可能导致选择混乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-UI坑点

1、el-popconfirm 气泡确认框

-1 设置确认按钮的文字 confirmButtonText = “…” 是无效的

需要避免驼峰命名法 , 换成 confirm-button-text 才可以设置成功

同理 cancelButtonText 需要换成=>cancel-button-text

-2 用来触发 Popconfirm 显示的 HTML标签上需要设置 slot=“reference”

否则会隐藏显示

-3 官方文档中 Events 里的 onConfirm 和 onCancel 事件

目前无法绑定方法,或者无法触发方法，如:

@onConfirm=“click()”

切换大小写或者避免驼峰命名法都已经尝试,都无效

2 如何修改 el-table 的边框颜色

                .el-table td,
                .el-table th.is-leaf,
                .el-table--border,
                .el-table--group {
                    border-color: black;
                }

                .el-table--border::after,
                .el-table--group::after,
                .el-table::before {
                    background-color: black;
                }

3 el-select value值

el-select的 el-option 选项不可设置value为对象，虽然可以点击可以更改对应的值，但select控件无法分辨选中了哪一个选项

<el-select v-model="editingInst.templateId" placeholder="请选择模板" @change='selectC'>
       <el-option v-for="item in tempList" 
                  :key="item.id" :label="item.name"
                   :value="item">
           item为数组内的对象,若设置option的value为对象,select控件无法分辨,会显示选中所有的选项
       </el-option>
</el-select>