element-plus 使用笔记

npm install element-plus --save

自动导入

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.js
···
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
···
export default defineConfig({
  plugins: [
    ···,
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  ···
})

el-table

可对数据进行排序、筛选、对比或其他自定义操作

fit 默认 true
是否自动撑开列填充满表格容器
设为 false 需要手动设置 列的 width

lazy 需配合 load

修改行悬停高亮的样式 --el-table-row-hover-bg-color
表格边框颜色 --el-table-border-color

去除底部白线，border没有看before

树形数据配合多选，无法选到子集

当对没有树形结构的表格绑定 row-key 不存在的键名 时, checkbox 会错误显示 全选

不换行显示方法

el-table-column

type=“selection/index/expand”
分别对应多选框 / 序号 / 折叠符号

filters 与 filter-method 配置过滤
当表格数据更新时，筛选会失效

用min-width 设置比例 总数字自动分配
width 不太好用

show-overflow-tooltip 不换行，超出通过提示框显示

el-menu

el-menu-item 的 route 属性生效需要 设置 router=“ture”

el-tag

关闭图标 需要 deep 修改样式

el-tree

透明背景 避免悬停选中白底

// sass
.el-tree {
  background-color: transparent;
  color: #a4adce;

  :deep(.el-tree-node__content:hover),
  :deep(.el-tree-node:hover)
  {
    background-color: transparent;
  }
  :deep(.el-tree-node:focus) {
    background-color: transparent;
    color: white;
    >.el-tree-node__content {
      background-color: transparent;
      color: white;
    }
  }
}

---

expand-on-click-node 点击结点是否展开，默认true展开

node-key 通常设为id default-key 会用到

setCheckedKeys([]) // 清空所有checked

修改页结点样式

:deep(.el-tree-node__children) {
  .el-tree-node.is-current {
    background-image: linear-gradient(to right, #1d305a, transparent, transparent);
    background-position-x: 35px;
  }
}
:deep(.is-current > .el-tree-node__content) {
  color: #CFD7FE
}

设置默认展开后，即便折叠也会展开其他后，再次被展开
默认选中并不会触发展开，setCurrentKey 可以触发展开

data 格式

[
  {
    id: '',
    label: '',
    children: ''
  }
]

// node-key="id"
Props = {
  children: 'children',
  label: 'label',
}

el-pagination

只支持slot插槽 在layout中注册

background 为 false 时，是白色背景

v-loading 加载中

element-loading-background 设置加载中背景色

el-popconfirm

官方文档不够准确，没有展示 popper-class 属性

el-select-tree

props 不能漏，否则无法选择

<el-tree-select v-model="parent_id" :data="TreeData" :props="{label: 'label', value: 'value', childern: 'children'}" :render-after-expand="false" popper-class="position" check-strictly style="width: 70%;" node-key="tree_id" />

el-select

去除hover box-shadow

.el-select:hover {
  .el-input .el-input__wrapper {
    --el-input-hover-border-color: transparent;
  }
}

:deep(.el-input__wrapper) {
  // 修改背景颜色
  background-color: xxx;
  // 去除圆角
  border-radius: 0;
  // 去除 白色“边框”
  box-shadow: none;
}

去除弹窗箭头，修改弹窗背景色，改变悬停颜色

.el-select__popper {
  margin: 0;
  padding: 0 8px;
  --el-border-color-light: rgba(21, 48, 99, .9);
  --el-bg-color-overlay: rgba(6, 29, 66, .95);

  --el-fill-color-light: rgba(6, 29, 66, .95)

  .el-popconfirm__action {
    margin: 0;
  }
  .el-popper__arrow::before {
    display: none;
  }
}

options 的数据格式

[
  {label: '', value: ''}
]

vue scoped 特点

el-upload

fileList 格式

[{
  name: 'element-plus-logo.svg',
  url: 'https://element-plus.org/images/element-plus-logo.svg',
}]

el-input

.el-input__inner::placeholder {
  color: #fff;
  text-align:center;
}
 /* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color: #fff;
  text-align:center;
}
 /* 火狐 */
.el-input__inner:-moz-placeholder {
  color: #fff;
  text-align:center;
}
 /*ie*/
.el-input__inner:-ms-input-placeholder {
  color: #fff;
  text-align:center;
}

el-date-picker

proper 白色边框样式修改

.el-popper.el-picker__popper {
  --el-border-color-light: rgba(6, 29, 66, .15);
  --el-bg-color-overlay: rgba(6, 29, 66, .95);
  --el-box-shadow-light: none;
  border: 1px solid rgba(21, 48, 99, .9);
  .el-date-picker {
    --el-border-color-light: rgba(6, 29, 66, .15);
  }
}

去除弹窗箭头方法 同上

使用format指定输入框的格式。 使用value-format指定绑定值的格式。