Element-UI自学实践（一）

Element-UI实战指南
原创 已于 2025-03-14 17:13:36 修改 · 690 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui

于 2024-08-13 00:11:49 首次发布

概述

Element-UI 是由饿了么前端团队推出的一款基于 Vue.js 2.0 的桌面端 UI 组件库。它为开发者提供了一套完整、易用、美观的组件解决方案，极大地提升了前端开发的效率和质量。本文为自学实践记录，详细内容见 📚 ElementUI官网

1. 基础组件

用于构建页面的基本结构，比如布局（Layout）、容器（Container）、图标（Icon）、按钮（Button）、文字链接（Link）等。

Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
};
</script>
<style>
.el-col {
     
     
  border-radius: 4px;
}
.bg-purple {
     
     
  background: #d3dce6;
}
.grid-content {
     
     
  border-radius: 4px;
  min-height: 36px;
}
</style>

在这里插入图片描述

  • <el-row>
    • gutter：指定每一栏之间的间隔，默认间隔为 0。
  • <el-col>
    • span：指定栅格占据的列数

Container 布局容器

快速搭建页面的基本结构

<template>
  <div>
    <el-container>
      <el-aside>Aside</el-aside>

      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
};
</script>
<style>
.el-header {
     
     
  background-color: #6da5ee;
}
.el-aside {
     
     
  background-color: #b3c0d1;
}
.el-main {
     
     
  background-color: #476d9e;
}
.el-footer {
     
     
  background-color: #213e64;
}
</style>

在这里插入图片描述

  • <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
  • <el-header>：顶栏容器。
  • <el-aside>：侧边栏容器。
  • <el-main>：主要区域容器。
  • <el-footer>：底栏容器。

实例：

<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>导航一
            </template>
            <el-menu-item index="1-1">选项1-1</el-menu-item>
            <el-submenu index="1-2">
              <template slot="title">选项1-2</template>
              <el-menu-item index="1-2-1">选项1-2-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">选项2</el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
  data() {
     
     
    const item = {
     
     
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
     
     
      tableData: Array(20).fill(item),
    };
  },
};
</script>
<style>
.el-header {
     
     
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
     
     
  color: #333;
}
</style>

在这里插入图片描述

Icon 图标

<i> 直接通过设置类名为 el-icon-iconName 来使用即可。

<template>
  <div>
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
};
</script>

在这里插入图片描述

图标详见 Icon 图标

Button 按钮

<el-button> 标签使用按钮， <el-button-group>标签为按钮分组。

<template>
  <div>
    <el-row>
      <h3>默认按钮</h3>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
      <h3>朴素按钮</h3>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
    </el-row>

    <el-row>
      <h3>圆角按钮</h3>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
    </el-row>

    <el-row>
      <h3>图标按钮</h3>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

    <el-row>
      <h3>文字按钮</h3>
      <el-button type="text">文字按钮</el-button>
    </el-row>

    <el-row>
      <h3>文字图标</h3>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary">
        上传<i class="el-icon-upload el-icon--right"></i>
      </el-button>
    </el-row>

    <el-row>
      <h3>按钮组</h3>
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit"></el-button>
        <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
      </el-button-group>
    </el-row>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
};
</script>
<style>
.el-row {
     
     
  margin: 5px;
}
</style>

在这里插入图片描述

常用属性：

  • type：类型，primary / success / warning / danger / info / text
  • plain：是否朴素按钮，boolean
  • round：是否圆角按钮，boolean
  • circle：是否圆形按钮，boolean
  • disabled：是否禁用状态，boolean
  • icon：图标类名。
  • size：尺寸，medium / small / mini

Link 文字链接

文字超链接 <el-link>

<template>
  <div>
    <el-row>
      <h3>文字链接</h3>
      <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="danger">危险链接</el-link>
    </el-row>

    <el-row>
      <h3>下划线</h3>
      <el-link :underline="false">无下划线</el-link>
      <el-link>有下划线</el-link>
    </el-row>

    <el-row>
      <h3>带图标文字链接</h3>
      <el-link icon="el-icon-edit">编辑</el-link>
      <el-link> 查看<i class="el-icon-view el-icon--right"></i> </el-link>
    </el-row>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
};
</script>
<style>
.el-row {
     
     
  margin: 5px;
}
.el-link {
     
     
  margin: 5px;
}
</style>

在这里插入图片描述

常用属性：

  • type：类型，primary / success / warning / danger / info
  • underline：是否下划线，boolean
  • disabled：是否禁用状态，boolean
  • href：原生 href 属性
  • icon：图标类名

2. 导航组件

导航组件用于创建各种导航菜单和路由，包括菜单（NavMenu）、面包屑（Breadcrumb）、页签（Tabs）、下拉菜单（Dropdown）、步骤条（Steps）等。

NavMenu 导航菜单

<el-menu> 为网站提供导航功能的菜单。导航菜单默认为垂直模式，通过 mode 属性可以使导航菜单变更为 horizontal 水平模式。

  • background-color：菜单的背景色
  • text-color：菜单的文字颜色
  • active-text-color：当前激活菜单的文字颜色
  • collapse：是否水平折叠收起菜单
  • router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

<el-menu-item> 组件提供单级菜单，index 设置唯一标志，route 设置 Vue Router 路径对象。

<el-submenu> 组件可以生成二级菜单，index 设置唯一标志。

<el-menu-item-group> 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。

<template>
  <div>
    <h3>horizontal-水平模式</h3>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title"> 
          我的工作台 
        </template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title"> 
            选项4 
          </template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>

    <h3>自定义颜色-折叠</h3>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      :collapse="isCollapse"
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">
            分组一
          </template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">
            选项4
          </template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
     
     
  name: "HomeView",
  data() {
     
     
    return {
     
     
      activeIndex: "1",
      isCollapse: true,
    };
  },
  methods: {
     
     
    handleSelect(key, keyPath) {
     
     
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
     
     
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
     
     
      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
     
     
  width: 200px;
  min-height: 400px;
}
</style>

在这里插入图片描述

组件递归

📖 vue组件递归
📖 element多层导航菜单

基于 element 导航菜单实现多层菜单，判断 children 有没有内容，children 没内容就是叶子节点 <el-menu-item>，有内容就是父菜单 <el-submenu>。

treeMenus 组件

<template>
  <div>
    <template v-for="(item,index) in list">
      <template v-if="item.children.length">
        <el-submenu :key="index" :index="item.index">
          <template :index="item.index" slot="title">
            <i :class="item.icon"></i>
            <span>{
  
  {item.name}}</span>
          </template>
          <treeMenus :list="item.children"></treeMenus>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :key="index" :index="item.index">
          <i :class="item.icon"></i>
          <span>{
  
  {item.name}}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>
<script>
export default {
     
     
  name: "treeMenus",
  props: {
     
     
    list: Array
  }
};
</script>

调用

<template>
  <div>
    <el-menu
      :collapse="isCollapse"
      class="el-menu-vertical-demo"
      @select="handleSelect"
    >
      <treeMenus :list="treeMenusData"></treeMenus>
    </el-menu>
  </div>
</template>

<script>
import treeMenus from "../views/treeMenus.vue";

export default {
     
     
  name: "HomeView",
  components: {
     
     
    treeMenus,
  },
  data() {
     
     
    return {
     
     
      isCollapse: false,
      treeMenusData: [
        {
     
     
          name: "菜单1",
          index: "menu1",
          icon: "el-icon-menu",
          children: [
            {
     
     
              name: "菜单1-1",
              index: "menu1-1",
              icon: "el-icon-menu",
              children: [
                {
     
     
                  name: "菜单1-1-1",
                  index: "menu1-1-1",
                  icon: "el-icon-menu",
                  children: [],
                },
                {
     
     
                  name: "菜单1-1-2",
                  index: "menu1-1-2",
                  icon: "el-icon-menu",
                  children: [],
                },
              ],
            },
            {
     
     
              name: "菜单1-2",
              index: "menu1-2",
              icon: "el-icon-menu",
              children: [],
            },
          ],
        },
        {
     
     
          name: "菜单2",
          index: "menu2",
          icon: "el-icon-document-copy",
          children: [
            {
     
     
              name: "数据集管理",
              index: "dataset",
              icon: "el-icon-document-copy",
              children: [],
            },
          ],
        },
        {
     
     
          name: "菜单3",
          index: "menu3",
          icon: "el-icon-folder",
          children: [],
        },
      ],
    };
  },
  methods: {
     
     
    handleSelect(key, keyPath) {
     
     
      console.log(key, keyPath);
    }
  }
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
     
     
  width: 200px;
  min-height: 400px;
}
</style>

在这里插入图片描述

Tabs 标签页

<el-tabs> 分隔内容上有关联但属于不同类别的数据集合。

  • value / v-model：选中选项卡的 name
  • type：风格类型，card、border-card
  • tab-position：选项卡所在位置，top、right、bottom、left
<template>
  <div>
    <h3>基础用法</h3>
    <el-tabs v-model="activeName1" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>

    <h3>选项卡样式</h3>
    <el-tabs v-model="activeName2" @tab-click="handleClick" type="card">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>

    <h3>卡片化</h3>
    <el-tabs v-model="activeName3" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>

    <h3>位置</h3>
    <el-tabs v-model="activeName4" @tab-click="handleClick" type="border-card" :tab-position="tabPosition">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>

    <h3>自定义标签页</h3>
    <el-tabs v-model="activeName5" @tab-click="handleClick" type="border-card">
      <el-tab-pane name="first">
        <template slot="label">
          <i class="el-icon-user"></i> 
          <span>用户管理</span>
        </template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
最低0.47元/天 解锁文章
Element UI框架学习篇(一)
SSS4362的博客
02-09 1594
主要讲述的是Elenen响应式布局t UI中的栅格布局(一行单格、一行多格、水平居中、)
Element UI框架学习篇(三)
SSS4362的博客
02-10 1299
主要讲述了通过vue2和elementUI实现简单的登录流程(不含记住密码) 具体含以下几个方面 ①实现登录时的消息提示 ②实现登录时候的格式验证
Element UI完整学习路线：从入门到精通实战指南
最新发布
gitblog_00307的博客
09-24 298
Element UI是一个基于Vue.js 2.0的桌面端UI组件库（User Interface Component Library，用户界面组件库），由饿了么前端团队开发并维护。它提供了丰富的预置组件和交互模式，能够帮助开发者快速构建高质量的Web应用界面。本文将从环境搭建开始，逐步深入组件应用、高级特性和实战开发，最终帮助读者掌握Element UI的核心能力。 ## 项目概述与资源准备 ...
ElementUI基本介绍及登录注册案例演示
ChatYU的博客
09-24 6723
Element UI 是一个基于 Vue.js 的开源前端框架，用于构建用户界面。它提供了一套丰富的 UI 组件和工具，可以帮助开发者快速构建现代化的 web 应用程序。基于 Vue.js：Element UI 是专门为 Vue.js 框架设计的，因此与 Vue.js 集成非常紧密。这使得开发者可以轻松地将 Element UI 的组件嵌入到他们的 Vue.js 应用程序中。丰富的 UI 组件：Element UI 提供了一系列常用的 UI 组件，包括按钮、表单、对话框、导航菜单、数据表格、图表等等。
elementui基础学习
weixin_43714592的博客
12-31 1211
一、前后端分离 1.什么是前后端分离？ 前端和后端分离开 前端: 将浏览器中为用户进行页面展示的部分称之为前端 后端: 为前端提供业务逻辑和数据准备的所有代码统称为后端 前后端分工: ​ 前后端开发工作的分工就是前后端分离。 前后端分工;(错误的认识) 真的前后端分离: ​ 不仅仅是前端和后端的分工开发,而是架构的模式 2.交互形式 在前后端分离架构中，后端只需要负责按照约定的数据格...
element UI在vue.js中的使用
山鹰的专栏
12-14 808
npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S ¶CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;m...
Element-UI自学实践（二）
weixin_40017062的博客
08-24 1387
Element-UI自学实践
Mac下载vue-element-ui踩坑经历记录
weixin_43887253的博客
07-23 583
小白第一次用Macbook，以前都是接触windows系统，linux命令也不咋会，想要自学vue前端，遂安装node-vscode-vue-git,很顺利，拉vue-element-ui，npm install，然后就报错了，依赖死活下载报错，报错信息部分如下： 然后就上网搜了一系列解决方法，没有解决，第二天无意尝试了GitHub上一个帖子的方法，结果成功啦，本小白还不知道啥原理，先记录一下解决办法，避免以后再碰到的时候抓瞎，稍后研究。。。 1、brew install pkg-config c.
基于Vue+element-ui 的Table二次封装的实现
12-29
公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了 效果图 表格组件的引入与使用 监测数据 v-model=tableData4 selection-change=...
基于 vue + Element-ui 开发的后台管理系统
2401_84092322的博客
04-22 1321
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-PCJuaPW3-1713759993282)][外链图片转存中…(img-tcF1keT5-1713759993283)][外链图片转存中…(img-HrJ8bxNF-1713759993283)][外链图片转存中…(img-WPpxA1Qx-1713759993283)]
Element UI学习记录
qq_38702465的博客
04-10 484
1.<el-row gutter="20">行间距20,<el-col span="8" offset ="8">长度(span)为8，偏移量为8，<el-row type="flex" justify="value">value为 start, center, end, space-between, space-around ，设置灵活的排版。 2. 3....
element-ui的学习
anbcd的博客
12-03 1020
2021.12.3 上一篇使用了yarn作为包管理工具，但是不幸的是yarn serve 的时候出错了，我直接用npm serve 了。现在学习element的简单使用。 cnpm install element-ui --save-dev 在vue里使用element-ui. 可以看到，package.json里已经有他的版本信息了。 在src/main.js，引入 然后在npm run serve 一下 出错了 在vue_cli文件下，新建文件vue.config.js...
element-ui学习
lklmr的专栏
08-17 201
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input
ElementUI 学习 (启航与组件)
QuantumYou的博客
09-27 426
ElementUI 引言 基于Vue 框架的UI 技术,网站快速成型工具 和 桌面端组件库 官网寻址 安装Element UI 通过vue脚手架创建项目 vue init webpack element(项目名) 在vue脚手架项目中安装elementUI # 1.下载elementui的依赖 npm i element-ui -S # 2.指定当前项目中使用elementui import ElementUI from 'element-ui'; import 'element-ui/lib/t
el-ui
洪君的博客
05-21 410
https://cloud.tencent.com/developer/doc/1270 el-ui
网页制作神器—ElementUI（小白入门超详细）
热门推荐
白白白鲤鱼的博客
08-13 2万+
快速上手网页制作神器——ElementUI
ElementUI学习笔记
m0_67226963的博客
10-26 2515
基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开源。其安装方式有 CDN、npm 和本地资源三种。通过基础的 24 分栏可实现 Layout 布局，包括单一分栏、分栏间隔和响应式布局；Container 布局容器用于搭建页面基本结构。此外，还介绍了导航菜单、按钮、消息提示、对话框、标签页、表格、分页、表单、下拉菜单等组件的使用场景、代码实现及相关参数，最后给出了一个综合案例展示其实际应用。
Element UI 快速入门
youqingy的博客
05-17 997
Element UI 还支持自定义主题，你可以通过修改文件夹下的 SCSS 文件来实现。Element UI 是构建 Vue 应用的强大工具，它不仅提供了丰富的组件，还提供了一些全局功能，如表单校验、消息提示等。通过本文的快速入门，你应该已经能够开始使用 Element UI 构建你的应用了。记住，实践是学习的最佳方式，所以不要犹豫，动手实践吧！希望这篇文章能够帮助你快速掌握 Element UI 的使用，如果你有任何问题或建议，欢迎在评论区留言讨论。祝你编程愉快！
Vue框架Element UI安装环境搭建
前端视听
09-10 1万+
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element 1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具
element-plus中的el-scrollbar隐藏横向滚动条
09-30
Element Plus是一款基于Vue.js的UI组件库，它提供了一个名为`el-scrollbar`的自定义滚动条插件。如果你想在Element Plus的某个元素上隐藏横向滚动条，你可以使用它的属性配置选项来控制。在`.vue`文件中，或者在需要设置滚动条的`<el-scrollbar>`元素上，你可以这样做： ```html <template> <div ref="scrollbar"> <!-- ...你的内容... --> </div> </template> <script setup> import { useElScrollbar } from 'element-plus'; const { scrollbarRef, setOptions } = useElScrollbar('your-element-id-or-ref'); setup() { // 如果你想隐藏横向滚动条 const handleScrollbarConfig = () => { setOptions({ scrollX: false, // 设置为false表示禁用横向滚动 }); }; // 当你的元素显示或大小变化时，应用滚动条配置 onMounted(() => handleScrollbarConfig()); onBeforeUpdate(() => handleScrollbarConfig()); // 更新时也需要更新配置 } </script> ``` 在这个例子中，`scrollX: false` 表示只有垂直滚动条，而横向的将被隐藏。如果你需要在其他时候显示滚动条，只需将 `scrollX` 设置回 `true`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会叫的狼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值