element-ui 问题大合集

K哇伊

已于 2023-02-07 17:07:30 修改

阅读量258

点赞数

分类专栏： vue2.0 element element-ui 文章标签： vue

于 2021-03-29 14:33:07 首次发布

本文链接：https://blog.csdn.net/caoluotuo/article/details/115297080

版权

这篇博客汇总了使用 Element-UI 在 Vue 项目中遇到的问题，包括 Table 的多选框禁用、表格边框移除、内容溢出显示、数据缓存问题，Pagination 的加载状态控制，Loading 的开启和关闭，Dialog 模态框的关闭设置，级联选择器的使用，以及 render 函数与 components 的区别，并给出了详细的解决方法。

摘要由CSDN通过智能技术生成

element-ui

欢迎使用element-ui编辑器
你好！ Element是基于 Vue 2.0 的桌面端组件ui库，适合用于开发pc端以及后台管理系统一类

@[TOC](目录)

前言

element-ui的日常使用问题总结。

# 1、安装，引入库

代码如下（示例）：

安装  element-ui
npm i element-ui -S

引入element-ui，如下：
import ElementUI from 'element-ui'
import {
    Loading } from 'element-ui'

2、Table 表格

2.1表格多选框禁用问题

<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange">
   <el-table-column type="selection" width="50" :selectable='selectEnable'>
   </el-table-column>
   <el-table-column prop="appName" label="选择产品" align="center" width="350">
   </el-table-column>
</el-table>

方法函数

selectEnable(row, rowIndex) {
   
      if (this.enabelIds.some(item => item === row.id)) {
   
        return false
      } else {
   
        return true// 不禁用
      }
    }

2.2 table表格去掉所有边框

提示：若去掉所有边框，可自行将头部边框注释掉即可
该样式写在style scoped外面

/* 在el-table 中添加class="customer_table"类名 */

/* 去掉表格单元格边框 */
.customer_table th {
   
  border: none;
}

.customer_table td,
.customer_table th.is-leaf {
   
  border: none;
}

/* 表格最外边框 */
.el-table--border,
.el-table--group {
   
  border: none;
}

/*  头部边框 */

最低0.47元/天解锁文章