第六章 Element UI-Toy模板网

这篇具有很好参考价值的文章主要介绍了第六章 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模板网！