1. Toy模板网首页
  2. > Toy博客

第六章 Element UI

9月前 作者：万有引力_LH 分类：Toy博客 阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了第六章 Element UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

内容来源于蓝桥杯竞赛，自己根据这个题纲重新巩固下前端的知识

第六章 Element UI

Container布局

布局实现方式，首先删除App.vue冗余代码，创建container文件定义布局模式，App.vue种引入布局模式。

<!--App.vue-->
<template>
  <div id="app">
    <Container />
  </div>
</template>

<script>
  import Container from "./views/Container.vue";
  export default {
    name: "App",
    components: {
      Container,
    },
  };
</script>

<style></style>
1. 上下布局

第六章 Element UI

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 260px;
  }
  .el-container {
    width: 50%;
  }
</style>
2.上中下布局

第六章 Element UI

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 260px;
  }
  .el-footer {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .el-container {
    width: 50%;
  }
</style>
3. 左右布局

第六章 Element UI

<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">Aside</el-aside>  // 使用aside组件是务必设置行内宽样式
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 260px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  .el-container {
    width: 50%;
  }
</style>上-下（左右）布局
4.上-下（左右）布局

第六章 Element UI

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {};
</script>

<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  #app {
    width: 50%;
  }
</style>
5.上-下（左右（上下））布局

第六章 Element UI

<template>
  <div class="container">
    <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>
</template>
<script>
  export default {
    name: "Container",
  };
</script>
<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  .el-footer {
    background-color: #1c0c5b;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
</style>
6.左右（上下）布局

第六章 Element UI

<template>
  <div class="container">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Container",
  };
</script>
<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
</style>
7.左-右（上中下）布局

第六章 Element UI

<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>
<script>
  export default {
    name: "Container",
  };
</script>
<style>
  .el-header {
    background-color: #916bbf;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #c996cc;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-aside {
    background-color: #3d2c8d;
    color: #fff;
    text-align: center;
    line-height: 200px;
  }
  .el-footer {
    background-color: #1c0c5b;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
</style>

Layout布局

Layout 布局把屏幕分成 24 列，也就是说每一行可以分成 24 等份。在 Element UI 中，用 <el-row> 组件代表行，用 <el-col> 组件代表列

新建layout.vue页面
<template>
  <div>
    <el-row>
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="7"><div class="grid-content bg3">3</div></el-col>
      <el-col :span="8"><div class="grid-content bg4">4</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="1"><div class="grid-content bg4">1</div></el-col>
      <el-col :span="2"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="3"><div class="grid-content bg3">3</div></el-col>
      <el-col :span="4"><div class="grid-content bg1">4</div></el-col>
      <el-col :span="14"><div class="grid-content bg5">5</div></el-col>
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .bg5 {
    background: #b8dfb8;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
</style>
分栏间隔

对于栅格布局来说，我们可能会有这样一个需要，就是列与列之间有一定的间隔间隙，故在 <el-row> 组件里提供了 gutter 属性来指定每一列之间的间隔。

<el-row> 与需要设置间隔的列是父子关系。

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="7"><div class="grid-content bg3">3</div></el-col>
      <el-col :span="8"><div class="grid-content bg4">4</div></el-col>
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
</style>
分栏偏移

分栏偏移就是我们可以指定某列的偏移，由于作用域是列，所以 Element UI 给 el-col 组件提供了 offset 属性来设置列的偏移栏数。

<el-col :offset="偏移栏数"></el-col>

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4" :offset="7"
        ><div class="grid-content bg1">1</div></el-col
      >
      <el-col :span="5" :offset="8"
        ><div class="grid-content bg2">2</div></el-col
      >
      <el-col :span="7" :offset="2"
        ><div class="grid-content bg3">3</div></el-col
      >
      <el-col :span="8" :offset="5"
        ><div class="grid-content bg4">4</div></el-col
      >
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
</style>
对齐方式

当一行分栏的总占比没有达到 24 份的时候，我们可以通过使用 flex 布局让分栏灵活对齐。

对于不同的对齐方式，flex 布局提供了 justify 属性来指定 start、center、end、space-between、space-around 其中的属性值来设置元素的排版方式，具体如下表所示：

属性值 说明
start 从起始位置开始排列元素。
center 居中排列。
end 从尾部位置开始排列元素。
space-between 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-around 均匀排列每个元素，每个元素周围分配相同的空间。 
<template>
  <div>
    <el-row type="flex" justify="start">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="4"><div class="grid-content bg1">1</div></el-col>
      <el-col :span="5"><div class="grid-content bg2">2</div></el-col>
      <el-col :span="6"><div class="grid-content bg3">3</div></el-col>
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
  .el-row {
    background: #f3f1f5;
    margin-top: 10px;
  }
</style>
响应式布局

Element UI 参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：

  • xs：特小，手机端。
  • sm：小于浏览器一半的宽度。
  • md：浏览器一半宽度左右。
  • lg：接近浏览器全屏宽度。
  • xl：浏览器全屏宽度。
里边数字军代表占比分数
<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="9" :sm="6" :md="4" :lg="3" :xl="2"
        ><div class="grid-content bg1">1</div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="10"
        ><div class="grid-content bg4">2</div></el-col
      >
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
        ><div class="grid-content bg2">3</div></el-col
      >
      <el-col :xs="7" :sm="6" :md="4" :lg="3" :xl="1"
        ><div class="grid-content bg3">4</div></el-col
      >
    </el-row>
  </div>
</template>
<script></script>
<style>
  .bg1 {
    background: #e2c2b9;
  }
  .bg2 {
    background: #bfd8b8;
  }
  .bg3 {
    background: #e7eab5;
  }
  .bg4 {
    background: #f1f7e7;
  }
  .grid-content {
    min-height: 36px;
    text-align: center;
  }
  .el-row {
    background: #f3f1f5;
    margin-top: 10px;
  }
</style>

表单组件

Form表单
<template>
  <el-form ref="form" :model="form">
    <h2>欢迎加入寄养大家庭</h2>
    <!--家庭名称-->
    <el-form-item label="家庭名称">
      <el-input v-model="form.name" style="width:200px"></el-input>
    </el-form-item>
    <!--提供物品-->
    <el-form-item label="提供物品">
      <el-select
        v-model="form.article"
        placeholder="请选择提供宠物的物品"
        multiple
      >
        <el-option label="玩具" value="toy"></el-option>
        <el-option label="零食" value="snack"></el-option>
        <el-option label="饮用水" value="water"></el-option>
        <el-option label="主食" value="staple"></el-option>
      </el-select>
    </el-form-item>
    <!--寄养时间-->
    <el-form-item label="寄养时间">
      <el-date-picker
        v-model="form.date1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </el-form-item>
    <!--接送开关-->
    <el-form-item label="是否接送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <!--家庭环境-->
    <el-form-item label="家庭环境">
      <el-checkbox-group v-model="form.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 label="小区花园" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <!--家庭描述-->
    <el-form-item label="家庭描述">
      <el-input
        type="textarea"
        v-model="form.desc"
        :rows="5"
        style="width:400px"
      ></el-input>
    </el-form-item>
    <!--申请和取消按钮-->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">申请</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: "",
          article: "",
          date1: "",
          delivery: false,
          type: [],
          desc: "",
        },
      };
    },
    methods: {
      onSubmit() {
        alert("发送成功！");
      },
    },
  };
</script>

<style></style>

表格组件

多选表格
<template>
  <div>
    <el-table
      :data="tableData"
      style="width:35%"
      border
      :row-class-name="tableRowClassName"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
    </el-table>
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >切换第二、第三行</el-button
    >
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        } else {
          return "row2";
        }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>
自定义表头

在表头加一个搜索功能，通过关键字或者 id 来搜索特定数据。

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width:50%"
    border
    stripe
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      // 处理编辑操作的方法
      handleEdit(index) {
        console.log(index);
        console.log("编辑已触发");
      },
      // 处理删除操作的方法
      handleDelete(index) {
        console.log(index);
        console.log("删除已触发");
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
        search: "",
      };
    },
  };
</script>
<style></style>

个人认为：这一章以及下一章Echarts都应该在实际使用中参考官网去学习，在应用中去理解文章来源地址https://www.toymoban.com/news/detail-459217.html

到了这里，关于第六章 Element UI的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 蓝桥杯算法竞赛系列第六章——蓝桥必备篇之模拟、思维

    蓝桥杯算法竞赛系列第六章——蓝桥必备篇之模拟、思维

    欢迎回到： 遇见蓝桥遇见你，不负代码不负卿！ 目录 一、简单模拟 栗子：换酒问题 栗子：按奇偶排序数组 栗子：害死人不偿命的（3n+1）猜想 栗子：挖掘机技术哪家强 二、查找元素 栗子：找 x 三、图形输出 栗子：跟奥巴马一起编程 四、日期处理 栗子：日期差值 五、进

    2023年04月22日
    浏览(51)
  • Odoo17入门教程第六章 UI

    Odoo17入门教程第六章 UI

    现在我们已经创建了新模型及其 相应的，是时候了 与用户界面交互。 在本章结束时，我们将创建几个菜单以访问默认列表 和窗体视图。 参考 ：与此主题相关的文档可以在数据文件中找到。 在第五章：安全性-简介中，我们通过 CSV 文件添加了数据。CSV 当要加载的数据具有

    2024年04月23日
    浏览(46)
  • Element UI表格内容双击可编辑，失去焦点提交内容

    Element UI表格内容双击可编辑，失去焦点提交内容

    需求就是双击列表中的某一cell，获取焦点时单元格变成input编辑框，失去焦点时如果内容有更改就触发修改的接口，如果内容无更改的话，就不触发。 1.首先给列表绑定双击事件 2.给单元格绑定 className 的回调方法，目的是获取选中单元格的行和列的index 相关代码如下： 视图

    2024年02月04日
    浏览(39)
  • element ui中Select 选择器，自定义显示内容

    element ui中Select 选择器，自定义显示内容

    正常情况下，下拉框选项展示内容，就是选择后展示的label内容 如图所示： 但是要想自定义选项内容，但是展示内容不是选项label的内容，可以在el-option标签内增加div进行自定义选项label展示，但选择后结果展示仍是el-option标签内label属性绑定的值。 展示效果如图：

    2024年02月05日
    浏览(42)
  • Element ui table表格内容超出隐藏显示省略号

    Element ui table表格内容超出隐藏显示省略号

    element ui官方文档上面有个参数 给el-table-column设置:show-overflow-tooltip=\\\"true\\\"属性可以使单元格超出的内容被隐藏显示为...当鼠标移入时单元格的上方会弹出一个tooltip来显示单元格的所有内容。 效果图： 有时候因为table中的文字非常的多，而show-overflow-tooltip默认是把折叠的内容全

    2024年02月11日
    浏览(33)
  • vue中element UI的 select值改变，内容改变方法

    vue中element UI的 select值改变，内容改变方法

    1.在select标签上绑定change事件 2.在Methods里写方法 方法一：switch 方法二：if判断 注：在vue中用Jquery，要选安装jquery库， 具体做法看下一篇《vue中jquery引法 或 $ is not defined错误解决方法》 效果如下图：

    2024年02月14日
    浏览(31)
  • 解决vue+element ui 在使用element表格时，出现表格表头与内容对不齐的问题

    解决vue+element ui 在使用element表格时，出现表格表头与内容对不齐的问题

    我们在使用element ui的表格功能时，出现如下图所示表格头与内容对不齐的问题时解决方法如下  方法一： 在App.vue中加入 方法二： 在自建的css文件中加入  body .el-table th.gutter{ display: table-cell!important; } 然后使用下列语句将css文件导入App.vue中 效果如下图所示      

    2024年02月15日
    浏览(59)
  • Element-UI侧边导航栏切换展示不同的右侧主体内容

    Element-UI侧边导航栏切换展示不同的右侧主体内容

    在用element做侧边栏遇到的问题，如果给每个按钮绑定一个值去用if判断有点麻烦了 这个时候可以用路由 1、开启导航栏的路由 但是直接给每个选项用router是会报错的 看了下文档，是给 el-menu这个标签来一个router的属性 那么为true的时候就是开启这个导航栏的路由了    但是直

    2024年02月04日
    浏览(47)

  • vue+Element UI Table表格动态渲染表头内容及操作按钮

    循环表格头信息数组 封装操作组件并引入表格文件内 配置表头信息数组及添加操作事件

    2024年02月13日
    浏览(66)
  • element-ui form表单自定义label的样式、内容

    element-ui form表单自定义label的样式、内容

    element-ui form表单自定义label的样式、内容

    2024年04月17日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包