element-ui 问题大合集

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;
}

/*  头部边框 */
.customer_table thead tr th.is-leaf