(一) 基础

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