当前位置： 首页 > news >正文

Element使用

news 来源：原创 2025/5/19 2:25:03

Element(美化网页）

ElementUI的使用注意事项：

Element.ui的使用基于Vue环境，于是Element相关组件的使用必须放在Vue对象绑定的视图中去

ElementUI的JS库的引入必须放在vue.js库的后面

<!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue,由于index.js依赖于Vue所以必须先导入Vue库 -->
    <script src="../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>
Element的布局：

基础布局：el-row

将一行最多分为24个列，可以是24的整数因子个为一个小块

<el-row>
            <!-- 一行组多24列 -->
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

容器布局：<el-container>
在这里插入图片描述

<el-container>：外层容器。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

注意：

当子元素中包含 <el-header> 或 <el-footer> 时，(只要有一个header，footer)全部子元素会垂直上下排列，否则会水平左右排列。
在这里插入图片描述

<body>
    <div id="div">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-container>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>

表单组件：el-form

注意：

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

v-model用于绑定输入框的数据到Vue对象的数据模型中

<body>
    <div id="div">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
            return {
                ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
                },
                rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
                }
            };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

    });
</script>

其中在submit提交按钮的函数中绑定对应的异步操作

在校验结果通过或者失败的话执行对应的操作，用于通过axios添加相应的异步操作

methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

表格组件：

<body>
    <div id="div">
        <!-- 当el-table元素中注入data对象数组后，
        在el-table-column中用prop属性来对应对象中的键名即可填入数据，
        用label属性来定义表格的列名。可以使用width属性来定义列宽。 -->
        <template>
            <!-- 通过:data将data属性绑定对应的数据模型 -->
            <!-- style表示只占整个页面的一半 -->
            <el-table
              :data="tableData"
              style="width: 50%">
              <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>
          </template>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
        return {
            // 在开发中这个数据模型一般是通过ajax请求从后台获取的默认为空数组
          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 弄'
          }]
        }
      }
    });
</script>

导航栏组件

<body>
    <div id="div">
        <!-- 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。--horizontal
        另外，在菜单中通过submenu组件可以生成二级菜单。
        Menu 还提供了background-color、text-color和active-text-color点击标签的颜色，
        分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 -->
        <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>
        <!-- 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>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
    });
</script>

Element综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <style>
      .el-header{
        background-color: #93acb4;
      }
      .header-img{
        width: 100px;
        margin-top: 20px;
      }
    </style>
</head>
<body>
  <div id="div">
    <el-container>
      <!-- 头部 -->
      <el-header class="el-header">
        <el-container>
          <div>
            <el-image src="img/export.png" class="header-img"></el-image>
          </div>
          <el-menu
            :default-active="activeIndex2"
            mode="horizontal"
            @select="handleSelect"
            background-color="#93acb4"
            text-color="white"
            active-text-color="#ffd04b"
            style="margin-left: auto;">
            <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>
            <el-menu-item index="3"><a href="学生列表.html" style="display: contents;" target="_self">首页</a></el-menu-item>
          </el-menu>
        </el-container>
      </el-header>


      <el-container style="height: 580px; border: 1px solid #eee">
        <!-- 侧边栏区域 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <!-- 侧边栏默认打开一个部门default-openeds="['1']" -->
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-menu"></i>学工部</template>
              <el-menu-item-group>
                <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
                <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
              <el-menu-item-group>
                <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-menu"></i>教研部</template>
              <el-menu-item-group>
                <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
                <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
                <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        
        <!-- 主区域 -->
        <el-container>
          <el-main>
            <b style="color: red;font-size: 20px;">学生列表</b>
            <div style="float:right">
              <el-button type="primary">添加学生</el-button>
            </div>
            <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-column
                label="操作"
                width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
          tableData:[
            {
              date:"2088-08-08",
              name:"张三",
              address:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"李四",
              address:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"王五",
              address:"北京市昌平区"
            },
          ]
        }
    });
</script>
</html>

相关文章：

  • 力扣72题编辑距离
  • 【弹性计算】异构计算云服务和 AI 加速器（三）：GPU 虚拟化技术
  • nuxt2 打包优化使用“compression-webpack-plugin”插件
  • Docker常用命令清单
  • python用户图形界面wxpython库安装与使用
  • S19文件格式详解：汽车ECU软件升级中的核心镜像格式
  • 谷歌浏览器中 Google 翻译无法使用的解决办法
  • AcWing 5538. 回文游戏 博弈论
  • 从零开始学机器学习——网络应用
  • Spring Batch 概览
  • 数据库---1.0
  • FY-3D MWRI亮温绘制
  • 【C++】深入理解C++模板：从原理到实践
  • VMware虚拟机迁移失败的故障排查方法
  • 关于Springboot 应配置外移和Maven个性化打包一些做法
  • 解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统
  • 【杂谈】-因果性：开启机器学习新纪元？
  • 《Gradio : AI awesome-demos》
  • 嵌入式笔试题+C/C++ 中 volatile static关键字详解，变量定义
  • 25年携程校招社招求职能力北森测评材料计算部分：备考要点与误区解析
  • 一周观展｜一批重量级考古博物馆开馆：从凌家滩看到孙吴大墓
  • 特写｜银耳种植“北移”到沧州盐山，村民入伙可年增收4万元
  • 从良渚到三星堆：一江水串起了5000年的文明对话
  • 新任重庆市垫江县委副书记刘振已任县政府党组书记
  • 哈马斯官员：若实现永久停火，可交出加沙地带控制权
  • 手机表面细菌菌落总数可能比马桶高10倍，医生详解如何洗手