element组件

最新推荐文章于 2024-05-22 18:11:34 发布
最新推荐文章于 2024-05-22 18:11:34 发布
阅读量192 收藏
点赞数
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58024411/article/details/132197297
版权

文章目录

前言

上一篇文章分享了element的引入，这一篇文章我们从官网使用部分组件实例,（其实复制使用即可）

一、官网地址？

element中文官网https://element.eleme.cn/#/zhCN/component/divider

二、部分组件

1.el-button

1.1官网截图

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">

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

  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>

  <el-row>
    <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="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>

  <h3>自己的按钮</h3>
  <el-button type="success">成功</el-button>
  <el-button type="danger" plain>危险</el-button>
  <el-button type="warning" round>警告</el-button>
  <el-button type="success" circle icon="el-icon-delete"></el-button>
  <h3>不同尺寸按钮</h3>
  <el-button type="warning" round>警告</el-button>
  <el-button type="warning" size="medium" round>警告</el-button>
  <el-button type="warning" size="small" round>警告</el-button>
  <el-button type="warning" size="mini" round>警告</el-button>


  <span class="el-icon-edit"></span>
  <b class="el-icon-edit"></b>
  <s class="el-icon-edit"></s>
  <a class="el-icon-edit"></a>
  <i style="font-size: 30px;color: red" 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>
  <i class="el-icon-ice-cream-round">冰棍</i>





</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
    methods:{

    }
  })
</script>
</html>

2.分割线

代码如下（）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <template>
    <div>
      <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
      <el-divider></el-divider>
      <hr>
      <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
    </div>
  </template>

  <template>
    <div>
      <span>头上一片晴天，心中一个想念</span>
      <el-divider content-position="left">少年包青天</el-divider>
      <span>饿了别叫妈, 叫饿了么</span>
      <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
      <span>为了无法计算的价值</span>
      <el-divider content-position="right">阿里云</el-divider>
    </div>
  </template>

  <template>
    <div>
      <span>雨纷纷</span>
      <el-divider direction="vertical"></el-divider>
      <span>旧故里</span>
      <el-divider direction="vertical"></el-divider>
      <span>草木深</span>
    </div>
  </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
    methods:{

    }
  })
</script>
</html>

3.导航菜单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <!--
  default-active设置默认激活的位置
  mode设置顶栏(horizontal)还是侧栏(默认)
  @select设置选择事件
  -->
  <el-menu :default-active="activeIndex" class="el-menu-demo"
           mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">处理中心</el-menu-item>
    <!--submenu子菜单-->
    <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>
    <!--disabled禁用-->
    <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>
  <div class="line"></div>
  <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <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>
  <h1>自己的导航菜单</h1>
  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">直播课</el-menu-item>
    <el-menu-item index="3">线上课</el-menu-item>
    <el-menu-item index="4">脱产班</el-menu-item>
    <el-submenu index="5">
      <template slot="title">关于我们</template>
      <el-menu-item index="5-1">联系方式</el-menu-item>
      <el-menu-item index="5-2">求职招聘</el-menu-item>
      <el-menu-item index="5-3">法律法规</el-menu-item>
    </el-submenu>
  </el-menu>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        //key=index    keyPath是一个数组 装着路径
        console.log(key, keyPath);
      }
    }
  })
</script>
</html>

4.表格

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <template>
    <!--data设置表格显示的数据来自于哪一个数组-->
    <el-table
            :data="tableData"
            style="width: 100%">
      <!--label设置这一列的标题
      prop=property属性, 设置这一列显示的内容是数组中对象的哪个属性-->
      <el-table-column
              prop="date"
              label="日期"
              width="280">
      </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>
  </template>
  <h3>员工列表</h3>
  <el-table :data="arr">
    <el-table-column type="index" label="编号"></el-table-column>
    <el-table-column label="名字" prop="name"></el-table-column>
    <el-table-column label="工资" prop="salary"></el-table-column>
    <el-table-column label="工作" prop="job"></el-table-column>
    <el-table-column label="操作">
      <!--自定义列必须添加template标签
      slot-scope设置接收当前行数据的变量为scope
      scope.$index得到当前行的下标
      scope.row得到当前行对应数组中的对象
      -->
      <template slot-scope="scope">
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        arr:[{name:"张三",salary:3000,job:"销售"},
          {name:"李四",salary:4000,job:"人事"},
          {name:"王五",salary:5000,job:"程序员"}],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods:{
      handleDelete(i,emp){
        if (confirm("您确认删除"+emp.name+"吗?")){
          v.arr.splice(i,1);
          v.$message.success("删除完成!");
        }
      }
    }
  })
</script>
</html>

总结

本次文章就介绍这么多了，学习更多可以去element官网查看使用https://element.eleme.cn/#/zh-CN/component/divider官网

qq_58024411
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue el-ui 官网
洪君的博客
03-21 5687
http://element-cn.eleme.io/#/zh-CN/component/installationelement https://element.eleme.cn/ elementUi官网 https://cloud.tencent.com/developer/section/1489858腾讯云 element-ui https://cloud.tencent.com...
element组件官网
qq_39990827的博客
01-18 7063
https://element.eleme.cn/#/zh-CN/component/quickstart
【Element入门】5、Element UI 导航组件详解
weixin_52938153的博客
05-22 649
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Element官网
Gordennizaicunzai的博客
03-14 8715
写在前面的 暖色篇 过渡篇 冷色篇 总结 写在前面的  首先，这篇文章是WEB前端设计中经常用到的比较好看的一些颜色，当然对色盲或者色弱的小伙伴们来说那是相当不友好。因为，即使是色觉正常的人来讲，长时间的调试颜色，也会让眼睛的感色细胞处于疲劳状态，也就是对于颜色“傻傻分不清”了，这种情况就更不要提色盲和色弱的人了，好了，话不多说，大家就尽情挑选自己喜欢的颜色吧！ 暖色篇 Color Show Code 桃色 ■■■ f58f98 薄柿 ■■■ ca8687 ...
elementui-中文官网
weixin_47127099的博客
04-07 8856
elementui官网在国内访问比较习慢，一般在国内都会使用中文官网，以下为elementUI中文官网地址，有需要的友友可以加个关注！
element ui---中文官网
热门推荐
张宇的博客
10-18 7万+
【代码】element ui---中文官网,elementui中文官网地址
vue的安装及element组件的安装方法
08-27
Vue安装及Element组件的安装方法 本文将详细介绍Vue的安装及Element组件的安装方法，旨在为读者提供一个清晰的安装指南。 一、新建Vue项目 1. 首先需要下载Node.js，安装后打开命令窗口可以使用npm包管理工具npm...
基于element组件库封装的动态表单组件
07-15
"基于element组件库封装的动态表单组件"就是这样一个解决方案，它针对Vue3进行了优化，旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件，通常用于处理复杂的表单...
qt webview 调用 饿了么element组件 demo
最新发布
06-25
总的来说，这个“qt webview 调用 饿了么element组件 demo”展示了如何在Qt应用中利用WebView展示Element UI组件，以及如何实现分页功能。通过结合Qt的C++和Element UI的JavaScript能力，你可以构建出具有丰富界面的...
基于vue-element组件实现音乐播放器功能
08-27
"基于vue-element组件实现音乐播放器功能" 本篇文章主要介绍了如何使用 Vue.js 框架和 Element 组件库来实现一个音乐播放器的功能。该播放器可以播放音乐、调整音量、显示进度条等功能。 首先，文章中使用了 ...
Element UI 官网
weixin_59104662的博客
03-03 4万+
Element UI 官网https://element.eleme.cn/#/zh-CN/component/quickstart
Element组件
qq_74105106的博客
12-30 405
今天学习了前端工程化的相关知识：环境准备，Vue项目及其开发流程。还有element相关组件和element相关案例。
elementui中文官网
m0_71200688的博客
05-04 1128
Element - 网站快速成型工具
element ui 官网下载,elementui中文官网
神经网络爱好者
09-09 3816
angular是前两年之内突然火得一塌糊涂的一个fe框架，这个我觉得可以算的上是真正意义上的框架了，MVVM双向绑定，包括它拥有足够完善的社区、生态，甚至chrome上都有很多好用的相关插件（这一点可以说是占了google出品的光），比较完整的大型项目都是可以考虑引入的。相比之下，react可以说是一个在MVC中V层做的十分出色和新颖的框架了，独特的jsx编译机制就已经让你的代码变得高大上了，我是觉得这个类库在UI层做的更彻底更专业，或者说让FE的代码更专业了。”的问题，我们暂时不谈。
ele饿了开发组件地址
小屁孩大帅-保密的博客
10-17 438
http://element-cn.eleme.io/#/zh-CN/component/transfer
Elementui官网地址
qq_43749617的博客
06-27 1万+
elementui官网
element-ui官网以及ant-design-vue官网
IT13333的博客
04-13 4053
element:https://element.eleme.cn/#/zh-CN/component/quickstart ant-design-vue:https://vue.ant.design/docs/vue/introduce-cn/
element 组件封装
07-28
对于封装 Element 组件，你可以按照以下步骤进行： 1. 创建一个独立的组件文件：在你的项目中创建一个新的组件文件，命名为`ElementWrapper.vue`（或其他你喜欢的名字）。 2. 引入 Element UI 库：在组件文件中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值