Element使用

最新推荐文章于 2026-04-23 05:18:11 发布

原创

最新推荐文章于 2026-04-23 05:18:11 发布 · 1.4k 阅读

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