IDEA项目实践——Element UI概述

系列文章目录

IDEA项目实践——JavaWeb简介以及Servlet编程实战

IDEA项目实践——Spring当中的切面AOP

IDEA项目实践——Spring框架简介，以及IOC注解

IDEA项目实践——动态SQL、关系映射、注解开发

IDEWA项目实践——mybatis的一些基本原理以及案例

文章目录

系列文章目录

前言

2.Element

2.1 快速入门

2.2 Element 布局

2.2.1 Layout 布局

2.2.2 Container 布局容器

2.3 案例

2.3.1 准备基本页面

2.3.2 完成表格展示

2.3.2.1 拷贝

2.3.2.2 修改

2.3.3 完成搜索表单展示

2.3.4 完成批量删除和新增按钮展示

2.3.5 完成对话框展示

2.3.6 完成分页条展示

2.3.7 完整页面代码

总结

前言

本文主要讲解Element UI,下面的案例经供参考。

2.Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是

Layout 布局 | Element Plus (element-plus.org)

进入官网能看到如下页面

接下来直接点击 组件 ，页面如下

点击下面的小图标也可以看到完整的代码段 

2.1 快速入门

  1. 创建页面，并在页面引入Element 的css、js文件 和 Vue.js

     <!-- 引入vue -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  2. .创建Vue核心对象

    Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

     <script>
     new Vue({
         el:"#app"
     })
 </script>

  3. 官网复制Element组件代码

  4. 在左菜单栏找到 Button 按钮 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。

整体页面代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="app">
 ​
 ​
     <el-row>
         <el-button>默认按钮</el-button>
         <el-button type="primary">主要按钮</el-button>
         <el-button type="success">成功按钮</el-button>
         <el-button type="info">信息按钮</el-button>
         <el-button type="warning">警告按钮</el-button>
         <el-button type="danger">删除</el-button>
     </el-row>
     <el-row>
         <el-button plain>朴素按钮</el-button>
         <el-button type="primary" plain>主要按钮</el-button>
         <el-button type="success" plain>成功按钮</el-button>
         <el-button type="info" plain>信息按钮</el-button>
         <el-button type="warning" plain>警告按钮</el-button>
         <el-button type="danger" plain>危险按钮</el-button>
     </el-row>
 ​
     <el-row>
         <el-button round>圆角按钮</el-button>
         <el-button type="primary" round>主要按钮</el-button>
         <el-button type="success" round>成功按钮</el-button>
         <el-button type="info" round>信息按钮</el-button>
         <el-button type="warning" round>警告按钮</el-button>
         <el-button type="danger" round>危险按钮</el-button>
     </el-row>
 ​
     <el-row>
         <el-button icon="el-icon-search" circle></el-button>
         <el-button type="primary" icon="el-icon-edit" circle></el-button>
         <el-button type="success" icon="el-icon-check" circle></el-button>
         <el-button type="info" icon="el-icon-message" circle></el-button>
         <el-button type="warning" icon="el-icon-star-off" circle></el-button>
         <el-button type="danger" icon="el-icon-delete" circle></el-button>
     </el-row>
 </div>
 ​
 <!-- 引入vue -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ​
 <script>
     new Vue({
         el:"#app"
     })
 </script>
 ​
 </body>
 </html>

2.2 Element 布局

Element 提供了两种布局方式，分别是：

  • Layout 布局——Layout 布局 | Element Plus (element-plus.org)

  • Container 布局容器——Container 布局容器 | Element Plus (element-plus.org)

2.2.1 Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

整体页面代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         .el-row {
             margin-bottom: 20px;
         }
         .el-col {
             border-radius: 4px;
         }
         .bg-purple-dark {
             background: #99a9bf;
         }
         .bg-purple {
             background: #d3dce6;
         }
         .bg-purple-light {
             background: #e5e9f2;
         }
         .grid-content {
             border-radius: 4px;
             min-height: 36px;
         }
         .row-bg {
             padding: 10px 0;
             background-color: #f9fafc;
         }
     </style>
 </head>
 <body>
 <div id="app">
     <el-row>
         <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
     </el-row>
     <el-row>
         <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
     <el-row>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
     </el-row>
     <el-row>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
     <el-row>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
     </el-row>
 </div>
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 ​
 <script>
     new Vue({
         el:"#app"
     })
 </script>
 </body>
 </html>

现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下

 <!--
 添加一行，8个格子  24/8 = 3
 -->
 <el-row>
     <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
     <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>

2.2.2 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

如下图是官网提供的 Container 布局容器实例：

 该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。

整体页面代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
     <style>
         .el-header {
             background-color: #B3C0D1;
             color: #333;
             line-height: 60px;
         }
 ​
         .el-aside {
             color: #333;
         }
     </style>
 </head>
 <body>
 <div id="app">
     <el-container style="height: 500px; border: 1px solid #eee">
         <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
             <el-menu :default-openeds="['1', '3']">
                 <el-submenu index="1">
                     <template slot="title"><i class="el-icon-message"></i>导航一</template>
                     <el-menu-item-group>
                         <template slot="title">分组一</template>
                         <el-menu-item index="1-1">选项1</el-menu-item>
                         <el-menu-item index="1-2">选项2</el-menu-item>
                     </el-menu-item-group>
                     <el-menu-item-group title="分组2">
                         <el-menu-item index="1-3">选项3</el-menu-item>
                     </el-menu-item-group>
                     <el-submenu index="1-4">
                         <template slot="title">选项4</template>
                         <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                     </el-submenu>
                 </el-submenu>
                 <el-submenu index="2">
                     <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                     <el-submenu index="2-1">
                         <template slot="title">选项1</template>
                         <el-menu-item index="2-1-1">选项1-1</el-menu-item>
                     </el-submenu>
                 </el-submenu>
                 <el-submenu index="3">
                     <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                     <el-menu-item-group>
                         <template slot="title">分组一</template>
                         <el-menu-item index="3-1">选项1</el-menu-item>
                         <el-menu-item index="3-2">选项2</el-menu-item>
                     </el-menu-item-group>
                     <el-menu-item-group title="分组2">
                         <el-menu-item index="3-3">选项3</el-menu-item>
                     </el-menu-item-group>
                     <el-submenu index="3-4">
                         <template slot="title">选项4</template>
                         <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                     </el-submenu>
                 </el-submenu>
             </el-menu>
         </el-aside>
 ​
         <el-container>
             <el-header style="text-align: right; font-size: 12px">
                 <el-dropdown>
                     <i class="el-icon-setting" style="margin-right: 15px"></i>
                     <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item>查看</el-dropdown-item>
                         <el-dropdown-item>新增</el-dropdown-item>
                         <el-dropdown-item>删除</el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
                 <span>王小虎</span>
             </el-header>
 ​
             <el-main>
                 <el-table :data="tableData">
                     <el-table-column prop="date" label="日期" width="140">
                     </el-table-column>
                     <el-table-column prop="name" label="姓名" width="120">
                     </el-table-column>
                     <el-table-column prop="address" label="地址">
                     </el-table-column>
                 </el-table>
             </el-main>
         </el-container>
     </el-container>
 </div>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="app">
 ​
 ​
     <el-row>
         <el-button>默认按钮</el-button>
         <el-button type="primary">主要按钮</el-button>
         <el-button type="success">成功按钮</el-button>
         <el-button type="info">信息按钮</el-button>
         <el-button type="warning">警告按钮</el-button>
         <el-button type="danger">删除</el-button>
     </el-row>
     <el-row>
         <el-button plain>朴素按钮</el-button>
         <el-button type="primary" plain>主要按钮</el-button>
         <el-button type="success" plain>成功按钮</el-button>
         <el-button type="info" plain>信息按钮</el-button>
         <el-button type="warning" plain>警告按钮</el-button>
         <el-button type="danger" plain>危险按钮</el-button>
     </el-row>
 ​
     <el-row>
         <el-button round>圆角按钮</el-button>
         <el-button type="primary" round>主要按钮</el-button>
         <el-button type="success" round>成功按钮</el-button>
         <el-button type="info" round>信息按钮</el-button>
         <el-button type="warning" round>警告按钮</el-button>
         <el-button type="danger" round>危险按钮</el-button>
     </el-row>
 ​
     <el-row>
         <el-button icon="el-icon-search" circle></el-button>
         <el-button type="primary" icon="el-icon-edit" circle></el-button>
         <el-button type="success" icon="el-icon-check" circle></el-button>
         <el-button type="info" icon="el-icon-message" circle></el-button>
         <el-button type="warning" icon="el-icon-star-off" circle></el-button>
         <el-button type="danger" icon="el-icon-delete" circle></el-button>
     </el-row>
 </div>
 ​
 <!-- 引入vue -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ​
 <script>
     new Vue({
         el:"#app"
     })
 </script>
 ​
 </body>
 </html>
 ​
 <script>
     new Vue({
         el:"#app",
         data() {
             const item = {
                 date: '2016-05-02',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄'
             };
             return {
                 tableData: Array(20).fill(item)
             }
         }
     })
 </script>
 </body>
 </html>

2.3 案例

其他的组件我们通过完成一个页面来学习。

我们要完成如下页面效果

要完成该页面，我们需要先对这个页面进行分析，看页面由哪儿几部分组成，然后到官网进行拷贝并修改。页面总共有如下组成部分

还有一个是当我们点击 新增 按钮，会在页面正中间弹出一个对话框，如下

2.3.1 准备基本页面

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="app">
     
 </div>
 ​
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 ​
 <script>
     new Vue({
         el: "#app"
     })
 </script>
 </body>
 </html>

2.3.2 完成表格展示

使用 Element 整体的思路就是 拷贝 + 修改。

2.3.2.1 拷贝

在左菜单栏找到 Table 表格并点击，右边主体就会定位到表格这一块，找到我们需要的表格效果（如上图），点击 显示代码 就可以看到这个表格的代码了。

将html标签拷贝到 <div id="app"></div> 中，如下：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

将css样式拷贝到我们页面的 head 标签中，如下

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

将方法和模型数据拷贝到 Vue 对象指定的位置

<script lang="ts" setup>
interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

上方是方法，下方为模型数据

拷贝完成后通过浏览器打开可以看到表格的效果

表格效果出来了，但是显示的表头和数据并不是我们想要的，所以接下来就需要对页面代码进行修改了。

2.3.2.2 修改

  1. 修改表头和数据

    下面是对表格代码进行分析的图解。根据下图说明修改自己的列数和列名

    修改完页面后，还需要对绑定的模型数据进行修改，下图是对模型数据进行分析的图解

  2. 给表格添加操作列

    从之前的表格拷贝一列出来并对其进行修改。按钮是从官网的 Button 按钮 组件中拷贝并修改的

  3. 给表格添加复选框列和标号列

    给表格添加复选框和标号列，效果如下

    此效果也是从 Element 官网进行拷贝，先找到对应的表格效果，然后将其对应代码拷贝到我们的代码中，如下是复选框列官网效果图和代码

    这里需要注意在 <el-table> 标签上有一个事件 @selection-change="handleSelectionChange" ，这里绑定的函数也需要从官网拷贝到我们自己的页面代码中，函数代码如下：

     从该函数中又发现还需要一个模型数据 multipleSelection ，所以还需要定义出该模型数据

标号列也用同样的方式进行拷贝并修改。

2.3.3 完成搜索表单展示

在 Element 官网找到横排的表单效果，然后拷贝代码并进行修改

点击上面的 显示代码 后，就会展示出对应的代码，下面是对这部分代码进行分析的图解

然后根据我们要的效果修改代码。

2.3.4 完成批量删除和新增按钮展示

从 Element 官网找具有着色效果的按钮，并将代码拷贝到我们自己的页面上

2.3.5 完成对话框展示

在 Element 官网找对话框，如下：

下面对官网提供的代码进行分析

上图分析出来的模型数据需要在 Vue 对象中进行定义。

2.3.6 完成分页条展示

在 Element 官网找到 Pagination 分页 ，在页面主体部分找到我们需要的效果，如下

点击 显示代码 ，找到 完整功能 对应的代码，接下来对该代码进行分析

上面代码属性说明：

  • page-size ：每页显示的条目数

  • page-sizes ： 每页显示个数选择器的选项设置。

    :page-sizes="[100,200,300,400]" 对应的页面效果如下：

  • currentPage ：当前页码。我们点击那个页码，此属性值就是几。

  • total ：总记录数。用来设置总的数据条目数，该属性设置后， Element 会自动计算出需分多少页并给我们展示对应的页码。

事件说明：

  • size-change ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。

  • current-change ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。

2.3.7 完整页面代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .el-table .warning-row {
             background: oldlace;
         }
         .el-table .success-row {
             background: #f0f9eb;
         }
     </style>
 </head>
 <body>
 <div id="app">
     <!--搜索表单-->
     <el-form :inline="true" :model="brand" class="demo-form-inline">
         <el-form-item label="当前状态">
             <el-select v-model="brand.status" placeholder="当前状态">
                 <el-option label="启用" value="1"></el-option>
                 <el-option label="禁用" value="0"></el-option>
             </el-select>
         </el-form-item>
 ​
         <el-form-item label="企业名称">
             <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
         </el-form-item>
 ​
         <el-form-item label="品牌名称">
             <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
         </el-form-item>
 ​
         <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
         </el-form-item>
     </el-form>
 ​
     <!--按钮-->
     <el-row>
         <el-button type="danger" plain>批量删除</el-button>
         <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
     </el-row>
     
     <!--添加数据对话框表单-->
     <el-dialog
             title="编辑品牌"
             :visible.sync="dialogVisible"
             width="30%">
         <el-form ref="form" :model="brand" label-width="80px">
             <el-form-item label="品牌名称">
                 <el-input v-model="brand.brandName"></el-input>
             </el-form-item>
 ​
             <el-form-item label="企业名称">
                 <el-input v-model="brand.companyName"></el-input>
             </el-form-item>
 ​
             <el-form-item label="排序">
                 <el-input v-model="brand.ordered"></el-input>
             </el-form-item>
 ​
             <el-form-item label="备注">
                 <el-input type="textarea" v-model="brand.description"></el-input>
             </el-form-item>
 ​
             <el-form-item label="状态">
                 <el-switch v-model="brand.status"
                            active-value="1"
                            inactive-value="0"
                 ></el-switch>
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="addBrand">提交</el-button>
                 <el-button @click="dialogVisible = false">取消</el-button>
             </el-form-item>
         </el-form>
     </el-dialog>
 ​
     <!--表格-->
     <template>
         <el-table
                 :data="tableData"
                 style="width: 100%"
                 :row-class-name="tableRowClassName"
                 @selection-change="handleSelectionChange">
             <el-table-column
                     type="selection"
                     width="55">
             </el-table-column>
             <el-table-column
                     type="index"
                     width="50">
             </el-table-column>
             <el-table-column
                     prop="brandName"
                     label="品牌名称"
                     align="center">
             </el-table-column>
             <el-table-column
                     prop="companyName"
                     label="企业名称"
                     align="center">
             </el-table-column>
             <el-table-column
                     prop="ordered"
                     align="center"
                     label="排序">
             </el-table-column>
             <el-table-column
                     prop="status"
                     align="center"
                     label="当前状态">
             </el-table-column>
             <el-table-column
                     align="center"
                     label="操作">
                 <el-row>
                     <el-button type="primary">修改</el-button>
                     <el-button type="danger">删除</el-button>
                 </el-row>
             </el-table-column>
 ​
         </el-table>
     </template>
 ​
     <!--分页工具条-->
     <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-sizes="[5, 10, 15, 20]"
             :page-size="5"
             layout="total, sizes, prev, pager, next, jumper"
             :total="400">
     </el-pagination>
 ​
 </div>
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script>
     new Vue({
         el: "#app",
         methods: {
             tableRowClassName({row, rowIndex}) {
                 if (rowIndex === 1) {
                     return 'warning-row';
                 } else if (rowIndex === 3) {
                     return 'success-row';
                 }
                 return '';
             },
             // 复选框选中后执行的方法
             handleSelectionChange(val) {
                 this.multipleSelection = val;
 ​
                 console.log(this.multipleSelection)
             },
             // 查询方法
             onSubmit() {
                 console.log(this.brand);
             },
             // 添加数据
             addBrand(){
                 console.log(this.brand);
             },
             //分页
             handleSizeChange(val) {
                 console.log(`每页 ${val} 条`);
             },
             handleCurrentChange(val) {
                 console.log(`当前页: ${val}`);
             }
         },
         data() {
             return {
                 // 当前页码
                 currentPage: 4,
                 // 添加数据对话框是否展示的标记
                 dialogVisible: false,
 ​
                 // 品牌模型数据
                 brand: {
                     status: '',
                     brandName: '',
                     companyName: '',
                     id:"",
                     ordered:"",
                     description:""
                 },
                 // 复选框选中数据集合
                 multipleSelection: [],
                 // 表格数据
                 tableData: [{
                     brandName: '华为',
                     companyName: '华为科技有限公司',
                     ordered: '100',
                     status: "1"
                 }, {
                     brandName: '华为',
                     companyName: '华为科技有限公司',
                     ordered: '100',
                     status: "1"
                 }, {
                     brandName: '华为',
                     companyName: '华为科技有限公司',
                     ordered: '100',
                     status: "1"
                 }, {
                     brandName: '华为',
                     companyName: '华为科技有限公司',
                     ordered: '100',
                     status: "1"
                 }]
             }
         }
     })
 </script>
 </body>
 </html>

总结

以上就是今天的内容~

欢迎大家点赞👍，收藏⭐，转发🚀，
如有问题、建议，请您在评论区留言💬哦。

最后：转载请注明出处！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/85958.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

商城-学习整理-高级-商城业务-Sentinel限流熔断降级Sleuth+Zipkin链路追踪（二十二）

商城-学习整理-高级-商城业务-Sentinel限流熔断降级Sleuth+Zipkin链路追踪（二十二）

目录 一、秒杀系统的架构二、SpringCloud Alibaba-Sentinel简介1、熔断降级限流什么是熔断什么是降级异同&#xff1a;什么是限流 2、Sentinel 简介官方文档&#xff1a;Sentinel 具有以下特征:Sentinel 分为两个部分: 3、Hystrix 与 Sentinel 比较4、整合 FeignSentinel 测试熔…
阅读更多...
UE4 地形编辑基础知识 学习笔记

UE4 地形编辑基础知识 学习笔记

之前自己写过这样的功能&#xff0c;今天看到一个UE现成的 点击地形&#xff0c;选择样条 按住CTRL键点击屏幕中某一个点会在场景内生成一个这样的图标 再点两次&#xff0c;会生成B样条的绿线条 点击号再选择一个模型&#xff0c;会生成对应的链条状的mesh 拉高最远处的一个图…
阅读更多...
【从零学习python 】75. TCP协议：可靠的面向连接的传输层通信协议

【从零学习python 】75. TCP协议：可靠的面向连接的传输层通信协议

文章目录 TCP协议TCP通信的三个步骤TCP特点TCP与UDP的区别TCP通信模型进阶案例 TCP协议 TCP协议&#xff0c;传输控制协议&#xff08;英语&#xff1a;Transmission Control Protocol&#xff0c;缩写为 TCP&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议…
阅读更多...
收集的一些比较好的git网址

收集的一些比较好的git网址

1、民间故事 https://github.com/folkstory/lingqiu/blob/master 2、童话故事 https://gutenberg.org/cache/epub/11027/pg11027-images.html 搜索&#xff1a;fairy story 3、一千零一夜 https://gutenberg.org/cache/epub/2591/pg2591-images.html 4、ai绘画关键词 https:…
阅读更多...
电力巡检三维数字化管理的新方案：图新地球电力版

电力巡检三维数字化管理的新方案：图新地球电力版

电力工业是国民经济发展的重要基础能源产业&#xff0c;是世界各国经济发展战略中的优先发展重点。当前中国电力行业运行平稳&#xff0c;电力消费持续增长&#xff0c;电力装机结构延续绿色低碳发展态势&#xff0c;同时投资规模日益扩大。随着全民用电量持续快速增长&#xf…
阅读更多...
django+MySQL购物商城系统（含源码+论文）

django+MySQL购物商城系统（含源码+论文）

对购物商城管理的流程进行科学整理、归纳和功能的精简&#xff0c;通过软件工程的研究方法&#xff0c;结合当下流行的互联网技术&#xff0c;最终设计并实现了一个简单、易操作的购物商城系统。内容包括系统的设计思路、系统模块和实现方法。系统使用过程主要涉及到管理员和用…
阅读更多...
【3Ds Max】可编辑多边形“点”层级的简单使用

【3Ds Max】可编辑多边形“点”层级的简单使用

目录 简介 示例 &#xff08;1&#xff09;移除 &#xff08;2&#xff09;断开 &#xff08;3&#xff09;焊接 &#xff08;4&#xff09;挤出 &#xff08;5&#xff09;切角 &#xff08;6&#xff09;目标焊接 &#xff08;7&#xff09;连接 简介 在3ds Max中&…
阅读更多...
气传导耳机哪个好？推荐几款性能表现不错的气传导耳机

气传导耳机哪个好？推荐几款性能表现不错的气传导耳机

​蓝牙耳机大家都很熟悉&#xff0c;如果更了解一些的朋友&#xff0c;一定也知道气传导耳机。气传导耳机最大的好处在于不入耳佩戴更舒适&#xff0c;户外使用时还能听到周围环境音&#xff0c;不会屏蔽汽车鸣笛声&#xff0c;使用更加安全。但也还有很多小伙伴不知道气传导耳…
阅读更多...
香蕉派社区推出带10G SFP+ 端口的Banana Pi BPI-R4 Wifi7开源路由器

香蕉派社区推出带10G SFP+ 端口的Banana Pi BPI-R4 Wifi7开源路由器

香蕉派BPI-R4 根据著名Banana Pi品牌背后的公司Sinovoip提供的初步信息&#xff0c;他们即将推出的Banana Pi BPI-R4路由器板目前正在开发中。与之前的 Banana Pi R3 板相比&#xff0c;这在规格上将有显着提升。这就是我们目前所知道的。 您可以选择 R4 板的两种不同配置。具…
阅读更多...
Python爬虫——scrapy_多条管道下载

Python爬虫——scrapy_多条管道下载

定义管道类&#xff08;在pipelines.py里定义&#xff09; import urllib.requestclass DangDangDownloadPipelines:def process_item(self, item, spider):url http: item.get(src)filename ../books_img/ item.get(name) .jpgurllib.request.urlretrieve(url, filename…
阅读更多...
有些网络通信协议？ - 易智编译EaseEditing

有些网络通信协议？ - 易智编译EaseEditing

网络通信协议是计算机网络中用于实现数据传输和通信的规则和标准。以下是一些常见的网络通信协议&#xff1a; TCP/IP协议&#xff1a; 是互联网的核心协议&#xff0c;包括传输控制协议&#xff08;TCP&#xff09;和网际协议&#xff08;IP&#xff09;。TCP负责数据的可靠传…
阅读更多...
JMETER基本原理

JMETER基本原理

Jmeter基本原理是建立一个线程池&#xff0c;多线程运行取样器产生大量负载&#xff0c;在运行过程中通过断言来验证结果的正确性&#xff0c;可以通过监听来记录测试结果&#xff1b; JMETER是运行在JVM虚拟机上的&#xff0c;每个进程的开销比loadrunner的进程开销大&#x…
阅读更多...
java八股文面试[数据结构]——集合框架

java八股文面试[数据结构]——集合框架

Java集合体系框架 Java集合类主要由两个根接口Collection和Map派生出来的。 Collection派生出了三个子接口&#xff1a; Map接口派生&#xff1a; Map代表的是存储key-value对的集合&#xff0c;可根据元素的key来访问value。 因此Java集合大致也可分成List、Set、Queue、Map…
阅读更多...
Java面向对象三大特性之多态及综合练习

Java面向对象三大特性之多态及综合练习

1.1 多态的形式 多态是继封装、继承之后&#xff0c;面向对象的第三大特性。 多态是出现在继承或者实现关系中的。 多态体现的格式&#xff1a; 父类类型 变量名 new 子类/实现类构造器; 变量名.方法名(); 多态的前提&#xff1a;有继承关系&#xff0c;子类对象是可以赋…
阅读更多...
PaddleRS 1.0.0版本安装

PaddleRS 1.0.0版本安装

PaddleRS 1.0.0版本安装 PaddleRS是百度飞桨、遥感科研院所及相关高校共同开发的基于飞桨的遥感影像智能解译开发套件&#xff0c; 支持图像分割、目标检测、场景分类、变化检测、图像复原等常见遥感任务。 PaddleRS致力于帮助遥感领域科研从业者快速完成算法的研发、验证和调…
阅读更多...
Java接入支付宝支付

Java接入支付宝支付

本文只接入了支付宝中的APP支付&#xff0c;如果要拓展更多支付方式的的话&#xff0c;请看文末补充 项目支付流程 前端发起创建订单请求后端接受请求创建订单&#xff0c;并将订单参数进行支付宝对应签名并返回前端拿到签名后调起支付宝支付 本文主要写的就是2的过程 前期准…
阅读更多...
生信豆芽菜-EMT评分的计算

生信豆芽菜-EMT评分的计算

网址&#xff1a;http://www.sxdyc.com/gradeEmt 1、数据准备 表达谱数据&#xff0c;行为基因&#xff0c;列为样本 2、提交后&#xff0c;等待运行成功即可下载 当然&#xff0c;如果不清楚数据是什么样的&#xff0c;可以选择下载我们的示例数据&#xff0c;也可以关注…
阅读更多...
Java课题笔记~Element UI

Java课题笔记~Element UI

Element&#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库&#xff0c;用于快速构建网页。 Element 提供了很多组件&#xff08;组成网页的部件&#xff09;供我们使用。例如 超链接、按钮、图片、表格等等~ 如下图左边的是我们编写页面看到的按钮&#…
阅读更多...
Qt+C++串口调试接收发送数据曲线图

Qt+C++串口调试接收发送数据曲线图

程序示例精选 QtC串口调试接收发送数据曲线图 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<QtC串口调试接收发送数据曲线图>>编写代码&#xff0c;代码整洁&#xff0c;规则&…
阅读更多...
【Android】 No matching variant of com.android.tools.build:gradle:[版本号] was found

【Android】 No matching variant of com.android.tools.build:gradle:[版本号] was found

项目报错 No matching variant of com.android.tools.build:gradle:8.1.1 was found. The consumer was configured to find a library for use during runtime, compatible with Java 8, packaged as a jar, and its dependencies declared externally, as well as attribute …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站