day03 Element-UI(1)

最新推荐文章于 2024-04-01 22:15:52 发布

weixin_51947476

最新推荐文章于 2024-04-01 22:15:52 发布

阅读量217

点赞数

文章标签： vue mysql sqlite django python

本文链接：https://blog.csdn.net/weixin_51947476/article/details/115890667

版权

本文详细介绍了Element-UI框架，包括其介绍、安装配置、常用组件如响应式布局、表格、分页、导航菜单等的使用。还通过一个分类与商品的案例，展示了如何创建模型类、写接口以及Vue页面，最后提到了git常用命令。

摘要由CSDN通过智能技术生成

一、昨日知识回顾

二、今日内容

1、 Element-ui框架介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

2、 Element-ui安装及配置

cnpm install --save element-ui

//在main.js中配制
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、常用组件的使用

响应式布局

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f3WaYLyy-1618879141614)(/Users/hanxiaobai/Downloads/人工智能/p6/P6资料/P6-后台管理(1)]/images/image-20210205142848828.png)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVnHhWa5-1618879141623)(/Users/hanxiaobai/Downloads/人工智能/p6/P6资料/P6-后台管理(1)]/images/image-20210205142934594.png)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABFcNEtn-1618879141636)(/Users/hanxiaobai/Downloads/人工智能/p6/P6资料/P6-后台管理(1)]/images/image-20210205143029958.png)

5.2.2 element-ui常用组件

表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rd6ryF6Z-1618879141645)(/Users/hanxiaobai/Downloads/人工智能/p6/P6资料/P6-后台管理(1)]/images/image-20210218003149429.png)

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

分页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3F284Zh-1618879141648)(/Users/hanxiaobai/Downloads/人工智能/p6/P6资料/P6-后台管理(1)]/images/image-20210218003415974.png)

一个完整的用例，使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

<template>
  <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 4
      };
    }
  }
</script>

导航菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-inBLw729-1618879141652)(/Users/hanxiaobai/Downloads/人工智能/p6/P6资料/P6-后台管理(1)]/images/image-20210218003536664.png)

通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。

<el-row class="tac">
  <el-col :span="12">
    <h5>自定义颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item