| 主目录 | 目录 | 内容 |
|---|---|---|
| 1 基础 | 官网 安装 引用 | |
| 2 表格 | 2.1 设置表头的颜色 | |
| 2.2 设置表格hover时的颜色 | ||
| 3 Popover 弹出框 | 3.1 Popover 弹出框 | 样式修改 |
| 4 tree 树形控件 | 怎么实现鼠标经过显示文字 |
(一) 基础
1.1 网址 ：https://element.eleme.cn/#/zh-CN/component/installation
1.2 npm安装： npm i element-ui -S
1.3 引入 :
在 main.js 中写入以下内容：
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
(二）记录
2 表格
2.1 设置表头的颜色
image.png
2.2 自己修改表格中 hover时的颜色
/deep/ .el-table--enable-row-hover {
.el-table__body tr:hover > td {
background: rgb(235, 247, 255);
}
}
3 Popover 弹出框
3.1 Popover 弹出框 样式修改
- 问题
/deep/直接 修改不了 因为 弹出框渲染的dom不在同一个div中- 解决
新建 一个<style lang="less"> </style>不要scoped 直接在这个style里面写样式
4 tree 树形控件
用element ui 但是默认每行都显示 “新增” “删除”
image.png
要实现 鼠标经过才显示 “新增” “删除”的文字
image.png
<el-tree
:data="treedata"
node-key="id"
@node-click="handleNodeClick"
default-expand-all
>
<span
class="custom-tree-node"
slot-scope="{ node, data }"
@mouseenter="mouseenter(data)"
@mouseleave="mouseleave(data)"
>
<span>
<span>{{ node.label }}</span>
<span style="color: #c0c4cb; padding-left: 3px"
>{{ data.staffCount }}人</span
>
</span>
<span>
<el-button
v-show="data.show"
type="text"
size="mini"
@click.stop="() => append(data)"
>
新增
</el-button>
<el-button
v-show="data.show"
type="text"
size="mini"
@click.stop="() => remove(node, data)"
>
删除
</el-button>
</span>
</span>
</el-tree>
methods:{
// 树节点鼠标移入移出
mouseenter(data) {
this.$set(data, "show", true);
},
mouseleave(data) {
this.$set(data, "show", false);
},
}
