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

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

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

options 数据格式

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

vue scoped 特点