第六章 Element UI

已于 2022-12-04 14:59:16 修改
阅读量2.7k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： ui vue.js javascript
于 2022-12-04 14:57:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43352648/article/details/128172613
版权

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

第六章 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
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui整体页面布局
m0_72189003的博客
11-10 1388
【代码】element-ui整体页面布局。
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
vue+elementui完美实现后台管理系统的左、右、顶部菜单布局
07-22
介绍地址：https://blog.csdn.net/lucky_fang/article/details/119143008 1.vue+elementui实现，完整的后台管理系统界面布局源码； 2.左边菜单、顶部菜单、右边显示页面内容，可自定义修改拓展； 3.无可挑剔的样式。 4.创建一个规范的vue项目目录，直接替换项目文件即可
ElementUI 组件：Layout布局（el-row、el-col）
ChinaDragon10的博客
01-31 2000
ElementUI 组件：Layout布局（el-row、el-col）
vue+elementUI实现点击左右箭头切换按钮功能
最新发布
weixin_45904557的博客
04-30 756
如果放六个超出了,就设置一下button不换行 再给里面的文字设置超出显示省略号就好了。最后用button和element里面的el-carousel(走马灯)结合了一下。原本是可以用el-tabs做的,就像下面的样式,但是领导说不行。循环来生成足够的 Carousel 页面，存放所有的按钮。来选取每页6个按钮，确保在当前页面范围内显示正确的按钮。：这是 Carousel 的每一页, 用。循环来生成每一页中的6个按钮。计算出需要多少页，每页6个按钮。表示每页显示6个按钮。
Element概述、入门案例及布局
m0_61961937的博客
05-31 7146
Element概述、入门案例及布局简单示例
Element-Ui组件（一）页面布局
热门推荐
究极死胖兽的博客
05-30 6万+
Element-Ui组件（一）页面布局 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 常用布局 el-row与el-col可搭配实现24格栅格布局，若布局较复杂，可以嵌套使用。 el-container作为布局容器（可以嵌套使用），内部可包含el-header（顶栏），el-aside（侧边栏），el-main（内...
Vue+ELementUI主页布局----侧边栏布局（el-aside）
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
vue.js+element-ui动态配置菜单的实例
10-18
Element UI 是一套基于 Vue.js 的开源 UI 组件库，主要用于构建企业级的 Web 应用，它提供了丰富的组件，如表格、按钮、提示、下拉框等，大大简化了前端开发的工作。 在标题中提到的 "vue.js+element-ui动态配置...
4_Element-UI笔记.pdf
08-27
Element-UI提供了60多个组件，这些组件分为六大类别：基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些分类涵盖了大部分B端业务开发的需求，如按钮、表格、日期选择器、通知提示等，...
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统源码.zip
07-05
基于vue2+Mysql+nodejs+express+element-ui的前后端分离图书管理系统 使用步骤: 本地运行方法  1.新建一个名为books_manage_system的数据库  2.将node目录下books_manage_system.sql文件导入到该数据库...
vue + elementUI 项目搭建Demo
12-05
使用vue-cli脚手架搭建vue + elementUI 小案例，功能代码不多，主要包括vue项目目录的创建、elementUI的引入、前端路由、i18n国际化语言、scss、引入iconfont
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
element-ui的Table表格变成左右结构，表头在最左边
cainiaoxuexi666的博客
10-23 3325
在TableColumn的render方法中，使用v-show将表头内容隐藏。然后在最左侧添加一个固定宽度的单元格，作为表头的占位符。在table的外层容器上，设置display:flex，将其子元素水平排列，并使用flex:1将表格和表头分别占据左右两个区域。element-ui的表头是由TableColumn组件构成的，可以通过自定义该组件的render方法来调整表头的位置。1. 使用CSS将表格的布局变为左右结构。2. 将表头移动到最左边。
Element UI框架学习篇(二)
SSS4362的博客
02-09 2734
主要讲述的内容有 ①整体布局 ②按钮的几种用法
VUE -element UI 学习整理 一 布局
清流弯弯
06-29 1387
https://element.eleme.cn/#/zh-CN/component/layout 通过基础的 24 分栏，迅速简便地创建布局。 一 基础布局 通过 row 和 col 组件，并通过 col 组件的span属性我们就可以自由地组合布局。 1）均分 <el-row > <el-col :span="24"> <div class="grid-content bg-pu...
Element UI 极简教程(1)
qq_41775769的博客
02-12 1582
Element UI 极简教程Layout 布局Container 布局容器Icon 图标Button 按钮Link 文字链接 本节主要介绍 Element UI 中的布局方式以及常用的 icon、Button、Link 组件 Layout 布局 通过基础的 24 栏划分，可以非常迅速便捷地创建布局。 通过 <el-row> 和 <el-col> 组件，并通过 col 组件的 span 属性就可以自由地组合布局。如下代码表示将 24 栏按照等大小划分成 3 个栏。 <el-r
Element-ui container常见布局
u011269801的专栏
09-10 844
Element-ui container常见布局
vue.js中Element-UI组件 页面布局
qq_15571919的博客
03-06 1355
vue.js中Element-UI组件 之 页面布局 一、开发环境的搭建 （1）普通的开发 第一步 ： 引入 index.css文件 第二步 : 引入elementui。js （2）模块化开发：需要在项目中安装element-ui模块 二、常用布局 el-row 、el-col 可以实现24格栅格布局，如果布局较复杂，可以嵌套使用 el-container 作为 布局容器 （可以嵌套使用） 内部可包含el-header(顶栏） el-aside(侧边栏）,el-main(
element ui tree上移
09-10
要在 Element UI 的 Tree 组件中实现上移功能，你可以通过以下步骤来完成： 1. 获取选中节点的数据和父节点的数据。 2. 判断当前选中节点是否为根节点或者已经是第一个节点，如果是，则无法进行上移操作。 3. 如果选中节点不满足上述条件，则可以执行上移操作。 4. 在父节点的子节点列表中交换选中节点与它前一个节点的位置。 5. 更新 Tree 组件的数据源，使用 Element UI 提供的 `this.$set()` 方法来触发数据更新。 6. 完成上移操作。 下面是一个示例代码，演示了如何实现在 Element UI Tree 上移节点： ```vue <template> <div> <el-button type="primary" @click="moveUp">上移</el-button> <el-tree :data="treeData" :props="treeProps" ref="tree"></el-tree> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Node 1', children: [] }, { id: 2, label: 'Node 2', children: [] }, // ... 其他节点 ], treeProps: { children: 'children', label: 'label' } }; }, methods: { moveUp() { const selectedNode = this.$refs.tree.getCurrentNode(); const parentNode = selectedNode.parent; if (!parentNode || parentNode.children[0] === selectedNode) { // 当前节点为根节点或已经是第一个节点，无法上移 return; } const index = parentNode.children.indexOf(selectedNode); const prevNode = parentNode.children[index - 1]; // 交换当前节点与前一个节点的位置 parentNode.children.splice(index, 1, prevNode); parentNode.children.splice(index - 1, 1, selectedNode); // 更新 Tree 组件的数据源 this.$set(this.treeData, index, prevNode); this.$set(this.treeData, index - 1, selectedNode); } } }; </script> ``` 请注意，上述代码仅展示了上移功能的实现逻辑，实际使用时需要根据你的业务场景进行适当调整。同时，你还需要根据你的项目配置和需求进行相关的引入和设置。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值