内容来源于蓝桥杯竞赛,自己根据这个题纲重新巩固下前端的知识
第六章 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. 上下布局
<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.上中下布局
<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. 左右布局
<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.上-下(左右)布局
<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.上-下(左右(上下))布局
<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.左右(上下)布局
<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.左-右(上中下)布局
<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都应该在实际使用中参考官网去学习,在应用中去理解
版权归原作者 万有引力_LH 所有, 如有侵权,请联系我们删除。