标签：el vue console name age value Element Plus 组件

Element Plus前端组件库

大纲

Element Plus基本使用
容器布局
导航栏
字体图标
栅格布局
卡片
表单
数据表格
反馈提示

Element Plus基本使用

Element-UI 是基于 Vue 开发的一套UI组件库，提供丰富网页开发的组件，可快速开发网站，降低前端开发成本。

目前Element UI有两个版本：

Element-UI：基于Vue2
Element-Plus：基于Vue3

官网文档：https://element-plus.org/zh-CN/component/button.html

其他参考文档：https://www.w3cschool.cn/vue_elementplus/ElementPlusButton.html

Vue项目使用ElementPlus

1、通过pycharm创建devops_web项目，并配置vue-router, 最后安装element-plus

npm install vue-router@4
vue add router

npm install element-plus

3、在vue项目main.js中引入element-plus组件以及css文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App)

app.use(ElementPlus)
app.use(router).mount('#app')

4、在官方文档找到需要的样式组件，复制代码到对components/HelloWorld.vue中使用，例如按钮

<template>
  <div class="hello">
    <el-button type="primary">element测试按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>

5、关闭eslint语法检查: 修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

6、启动项目并查看效果

ElementUI开发一个网站流程

页面布局
导航栏
每个页面功能开发（主要内容区域填充）

容器布局

容器布局：快速搭建页面的基本框架。

官方文档： https://element-plus.gitee.io/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

1、项目结构

2、 App.vue代码

<template>
  <router-view/>
</template>

<style>

</style>

3、router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '../views/Layout.vue'

const routes = [
  {
    path: '/',
    name: 'layout',
    component: Layout
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4、views/Layout.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">侧边栏区域</el-aside>
      <el-container>
        <el-header>头部区域</el-header>
        <el-main>主要区域</el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout'
  }
</script>
<style>
  .el-header {
    background: orange;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: aquamarine;
  }
</style>

5、项目运行结果

导航栏

导航栏基础

官方文档： https://element-plus.gitee.io/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F

1、定义views/Layout.vue 中的侧边栏区域和样式

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>一级菜单1</span>
          </template>
          <el-menu-item index="2-1">二级菜单1</el-menu-item>
          <el-menu-item index="2-2">二级菜单2</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>一级菜单1</span>
          </template>
          <el-menu-item index="3-1">二级菜单1</el-menu-item>
          <el-menu-item index="3-2">二级菜单2</el-menu-item>
        </el-sub-menu>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>头部区域</el-header>
        <el-main>主要区域</el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout'
  }
</script>
<style>
  .common-layout,.el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    background: orange;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: aquamarine;
  }
</style>

2、修改App.vue的样式

<template>
  <router-view/>
</template>

<style>
 html, body, #app {
   height: 100%;
   margin: 0;
 }
</style>

3、运行效果

基于router动态生成导航栏

router属性：启用 vue-router 模式。启用该模式会在激活导航时以 index 作为 path 进行路由跳转
由于主要区域没有引用对应页面的内容，还会显示Layout.vue中固定内容，这时还需要配置路由占位符引用

1、动态路由项目结构

2、 App.vue

<template>
  <router-view/>
</template>

<style>
 html, body, #app {
   height: 100%;
   margin: 0;
 }
</style>

3、router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '../views/Layout.vue'

const routes = [
  {
    path: '/',
    name: '仪表盘',
    component: Layout
  },
  {
    path: '/nav1',
    name: '一级菜单1',
    component: Layout,
    children: [
      {
         path: '/a',
         name: '页面A',
         component: () => import('../views/A.vue')
      },
      {
         path: '/b',
         name: '页面B',
         component: () => import('../views/B.vue')
      },
    ]
  },
  {
    path: '/nav2',
    name: '一级菜单2',
    component: Layout,
    children: [
       {
         path: '/c',
         name: '页面C',
         component: () => import('../views/C.vue')
       }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4、views/A.vue

<template>
    这是A页面
</template>

<script>
    export default {
        name: "A"
    }
</script>

<style scoped>

</style>

5、 views/B.vue

<template>
    这是B页面
</template>

<script>
    export default {
        name: "B"
    }
</script>

<style scoped>

</style>

6、views/C.vue

<template>
    这是c页面
</template>

<script>
    export default {
        name: "C"
    }
</script>

<style scoped>

</style>

7、views/Layout.vue ：这是最核心的地方

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        router
      >
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
              <el-menu-item v-if="!menu.children" :index="menu.path">
                <el-icon><icon-menu /></el-icon>
                <span>{{menu.name}}</span>

              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else :index="menu.path">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>头部区域</el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout'
  }
</script>
<style>
  .common-layout,.el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    background: orange;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: aquamarine;
  }
</style>

8、效果展示

字体图标

官方站点： https://element-plus.gitee.io/zh-CN/component/icon.html

1、安装字体图标

npm install @element-plus/icons-vue

2、注册所有图标到main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElIconModules from '@element-plus/icons-vue'

const app = createApp(App)

app.use(ElementPlus)
for(let iconName in ElIconModules) {
    app.component(iconName,ElIconModules[iconName])
}

app.use(router).mount('#app')

3、修改router/index.js , 加入icon字段

...
const routes = [
  {
    path: '/',
    name: '仪表盘',
    icon: 'Monitor',
    component: Layout
  },
  {
    path: '/nav1',
    name: '一级菜单1',
    icon: 'Setting',
    component: Layout,
    children: [
      {
         path: '/a',
         name: '页面A',
         component: () => import('../views/A.vue')
      },
      {
         path: '/b',
         name: '页面B',
         component: () => import('../views/B.vue')
      },
    ]
  },
  {
    path: '/nav2',
    name: '一级菜单2',
    icon: 'PieChart',
    component: Layout,
    children: [
       {
         path: '/c',
         name: '页面C',
         component: () => import('../views/C.vue')
       }
    ]
  }
]
...

4、修改view/Layout.vue, 引用动态路由中的icon

<el-icon><component :is="menu.icon" /></el-icon>

左侧菜单栏折叠效果设计

1、修改views/Layout.vue 新增折叠配置和logo

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >

            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
              <el-menu-item v-if="!menu.children" :index="menu.path">
                <el-icon><component :is="menu.icon" /></el-icon>
                <span>{{menu.name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout',
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }
    }

  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    background: orange;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: aquamarine;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
</style>

2、效果展示

栅格布局

栅格布局（Layout布局）：通过基础的24分栏，迅速简便地创建布局。

头像信息处理

1、添加头像部分： view/Layout.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu
        default-active="2"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >

            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <template v-for="menu in this.$router.options.routes" :key="menu">
            <!-- 一级菜单 没有子路由的菜单-->
              <el-menu-item v-if="!menu.children" :index="menu.path">
                <el-icon><component :is="menu.icon" /></el-icon>
                <span>{{menu.name}}</span>
              </el-menu-item>
              <!--  处理有子路由的菜单   -->
              <el-sub-menu v-else :index="menu.path">
                <template #title>
                  <el-icon><component :is="menu.icon" /></el-icon>
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
      <el-container>
        <el-header>
          <!-- 导航栏折叠-->
          <div class="toggleCollapse">
            <el-icon :size="25" @click="toggleCollapse"><Fold /></el-icon>
          </div>
          <!-- 头像-->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/avatar.png" alt="">
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>密码修改</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <!-- 占位符，显示路由跳转后加载的内容-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  export default {
    name: 'Layout',
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }
    }

  }
</script>
<style>
  .common-layout, .el-container, .el-menu {
    height: 100%;
  }
  .el-header {
    border-bottom: 1px lightgrey solid;
  }
  .el-aside {
    background: grey;
  }
  .el-main {
    background: #FFFFF;
  }
  .collapse-transition {
    cursor: pointer;
  }
  .logo img {
    width: 200px;
    height: 60px;
    /*margin-left: 10px;*/
  }
  .el-dropdown-link img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: auto;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>

2、效果展示

栅格布局介绍

代码结构

el-row 代表行，里面嵌套el-col
el-col 代表列，总分为24列

属性：

gutter 列间隔
Offset: 向右偏移
span 占据的列数

1、示例代码： views/A.vue

<template>
    这是A页面
    <h2>栅格布局</h2>
    <el-row :gutter="10">
       <el-col :span="12">
           <div style="background-color: aquamarine">第一列</div>
       </el-col>
       <el-col :span="12">
           <div style="background-color: orange">第二列</div>
       </el-col>
    </el-row>
    <br>
    <el-row :gutter="10">
       <el-col :span="8">
           <div style="background-color: aquamarine">第一列</div>
       </el-col>
       <el-col :span="8">
           <div style="background-color: orange">第二列</div>
       </el-col>
        <el-col :span="8">
           <div style="background-color: red">第三列</div>
       </el-col>
    </el-row>
    <br>
    <el-row :gutter="10">
       <el-col :span="4" :offset="4">
           <div style="background-color: aquamarine">第一列</div>
       </el-col>
       <el-col :span="8">
           <div style="background-color: orange">第二列</div>
       </el-col>
        <el-col :span="8">
           <div style="background-color: red">第三列</div>
       </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "A"
    }
</script>

<style scoped>

</style>

2、效果展示

卡片

官方文档： https://element-plus.gitee.io/zh-CN/component/card.html
背景不能是白色，看不出效果
悬浮展示数据，类似于卡片效果

1、修改views/A.vue

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>卡片名称</span>
        </div>
      </template>
        <span>卡片内容1</span>
    </el-card>

2、效果

表单

参考文档：https://element-plus.gitee.io/zh-CN/component/form.html
表单包含输入框，单选框，下拉选择，多选框等用户输入的组件。使用表单，可以收集、验证和提交数据。
表单常见的组件
- el-input：输入框
- el-select：下拉选择框
- el-checkbox-group：多选框
- el-radio-group：单选框

1、代码示例

    <h2>表单</h2>
    <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button>重置</el-button>
        </el-form-item>
    </el-form>

2、效果展示

表单：校验规则

表单组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

使用流程：

1、定义效验规则

2、el-form 指定“:rules” 属性传入定义的效验规则

3、el-form-item 指定“prop”属性与效验规则名称对应

示例代码：

<template>
    <h2>表单</h2>
    <el-form :model="form" :rules="formRules" label-width="120px">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </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 {
        name: "A",
        data() {
            return {
                form: {
                    name: '',
                    age: '',
                    sex: ''
                },
                formRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min:2, max:10, message: '长度在2到10个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                        {min:1, max:120, message: '年龄在1到120岁之间', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>

表单：自定义校验规则

1、示例：判断两次密码是否输入一致

<template>
    <h2>表单</h2>
    <el-form :model="form" :rules="formRules" label-width="120px">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="旧密码" prop="old_passwd">
            <el-input v-model="form.old_passwd" />
        </el-form-item>
        <el-form-item label="新密码" prop="new_passwd">
            <el-input v-model="form.new_passwd" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirm_passwd">
            <el-input v-model="form.confirm_passwd" />
        </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 {
        name: "A",
        data() {
            const checkNewOldPassword = (rule, value, callback) => {
                if (value == this.form.old_passwd) {
                    callback(new Error('新旧密码不能一致！！'))
                }else {
                    return callback()
                }
            };
            const checkNewPassword = (rule, value, callback) => {
                if (value != this.new_passwd) {
                    callback('两次输入的密码不一致')
                } else  {
                    return callback()
                }
            };
            return {
                form: {
                    name: '',
                    age: '',
                    sex: '',
                    old_passwd: '',
                    new_passwd: '',
                    confirm_passwd: ''
                },
                formRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min:2, max:10, message: '长度在2到10个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                        {min:1, max:120, message: '年龄在1到120岁之间', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    old_passwd: [
                        {required: true, message: '请输入旧密码', trigger: 'blur'},
                        {min:8, max:16, message: '长度在8到16个字符', trigger: 'blur'}
                    ],
                    new_passwd: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min:8, max:16, message: '长度在8到16个字符', trigger: 'blur'},
                        {validator: checkNewOldPassword, trigger: 'blur'}
                    ],
                    confirm_passwd: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {min:8, max:16, message: '长度在8到16个字符', trigger: 'blur'},
                        {validator: checkNewPassword ,trigger: 'blur'}
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

表单：重置按钮

重置按钮：对整个表单进行重置，恢复到初始值状态并移出效验结果。

正常表单重置需要获取表单项，会比较麻烦，Vue 为简化这种获取提出了ref 属性和$refs 对象。一般的操作流程是 :ref 绑定元素，$refs 获取元素

表单：提交前预验证

在点击提交按钮执行对整个表单进行验证，可有效保障数据完整性。

validate方法：对整个表单的内容进行验证，参数为一个回调函数，该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段

数据表格

边框、宽度、固定列

官方文档： https://element-plus.gitee.io/zh-CN/component/table.html
表格属性：
- border：是否带有纵向边框
- data：表格使用的数据，自动渲染
列属性：
- prop：键名，对应数据中的字段
- label：列名
- width：列宽
- fixed：列是否固定在左侧或者右侧，true表示固定在左侧fixed=“right”

1、基础表格示例： views/B.vuie

<template>
    这是B页面
    <h2>基础表格示例</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="city" label="城市" width="180" />
                <el-table-column prop="age" label="年龄" />
        </el-table>
    </el-card>

</template>

<script>
    export default {
        name: "B",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],

            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

表格：单选

表格组件提供了单选的支持，由 current-change 事件来管理选中时触发的事件，它会传入当前行数据。

1、单选示例

<template>
    这是B页面
    <h2>表格： 单选</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table
                :data="tableData"
                border="1px"
                style="width: 100%"
                @current-change="currentChange"
                highlight-current-row="true"
        >
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="city" label="城市" width="180" />
                <el-table-column prop="age" label="年龄" flexd="right"/>
        </el-table>
    </el-card>
</template>
<script>
    export default {
        name: "B",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],
            }
        },
        methods: {
            currentChange(value) {
                console.log(value)
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

表格：多选

实现多选非常简单：手动添加一个 el-table-column，设 type 属性为 selection 即可自动生成checkbox多选。

1、代码示例

<template>
    这是B页面
    <h2>表格： 多选</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table
                :data="tableData"
                border="1px"
                style="width: 100%"
                @current-change="currentChange"
                highlight-current-row="true"
                @selection-change="handleSelectionChange"

        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="city" label="城市" width="180" />
            <el-table-column prop="age" label="年龄" flexd="right"/>
        </el-table>
    </el-card>
</template>

<script>
    export default {
        name: "B",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],
            }
        },
        methods: {
            handleSelectionChange(value) {
                console.log(value)
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

表格：数据批量删除

1、示例代码

<template>
    这是B页面
    <h2>表格： 多选</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table
                :data="tableData"
                border="1px"
                style="width: 100%"
                @current-change="currentChange"
                highlight-current-row="true"
                @selection-change="handleSelectionChange"

        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="city" label="城市" width="180" />
            <el-table-column prop="age" label="年龄" flexd="right"/>
        </el-table>
        <el-button type="danger" @click="onDelete">批量删除</el-button>
    </el-card>
</template>

<script>
    export default {
        name: "B",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],
                selecteData: ''
            }
        },
        methods: {
            currentChange(value) {
                console.log(value)
            },
            handleSelectionChange(value) {
                console.log(value)
                this.selecteData = value
            },
            onDelete() {
                //请求api， 批量删除
                console.log(this.selecteData)
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

表格：排序

对表格进行排序，可快速查找或对比数据。

在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。

 <el-table-column prop="name" label="姓名" width="180" sortable="true"/>

表格：自定义列模板

自定义列的显示内容，可组合其他组件使用，一般作为操作栏，例如删除、编辑。

通过slot（插槽）可以获取到当前行内容数据

1、 views/C.vue 创建示例代码

<template>
    这是c页面
    <h2>基础表格示例</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="city" label="城市" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column
                    label="操作"
                    flexd="right"
            >
                <template #default="scope">
                    <el-button
                            type="primary"
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                            type="danger"
                            size="small"
                            @click="handleDelete(scope.$index, scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="danger" @click="onDelete">批量删除</el-button>
    </el-card>
</template>

<script>
    export default {
        name: "C",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],
                selecteData: ''
            }
        },
        methods: {
            currentChange(value) {
                console.log(value)
            },
            handleSelectionChange(value) {
                console.log(value)
                this.selecteData = value
            },
            onDelete() {
                //请求api， 批量删除
                console.log(this.selecteData)
            },
            handleEdit(index, row) {
                console.log(index, row)
            },
            handleDelete(index, row) {
                console.log(index, row)
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

表格：分页

当数据量过多时，使用分页分解数据。

官方文档： https://element-plus.gitee.io/zh-CN/component/pagination.html

属性：

• background：是否为分页按钮添加背景色

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

• page-sizes：可选择每页显示条目个数

• total：总条目数

• layout：分页功能显示的内容

• current-page：当前页码改变时触发

事件：

• size-change：每页显示条目改变时触发

• current-change：current-page改变时触发

1、示例代码

<template>
    这是c页面
    <el-card class="box-card">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </el-card>
</template>

<script>
    export default {
        name: "C",
        data() {
            return {
            }
        },
        methods: {
            //监听选择每一页显示多少条数据
            handleSizeChange(newPageSize) {
                console.log(newPageSize)
            },
            //监听选择第几页的数据
            handleCurrentChange(newCurrentPage) {
                console.log(newCurrentPage)
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

反馈组件

Alert提示

官方文档： https://element-plus.gitee.io/zh-CN/component/alert.html

1、消息提示示例代码

2、效果展示

消息弹出框

1、消息提示示例代码

<template>
    这是c页面
    <h2>基础表格示例</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="city" label="城市" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column
                    label="操作"
                    flexd="right"
            >
                <template #default="scope">
                    <el-button
                            type="primary"
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                            type="danger"
                            size="small"
                            @click="handleDelete(scope.$index, scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="danger" @click="onDelete">批量删除</el-button>
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </el-card>
    <el-alert
        title="成功提示的文案"
        type="success">
    </el-alert>
    <el-button type="primary" @click="open">成功消息</el-button>
</template>

<script>
    export default {
        name: "C",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],
                selecteData: '',
            }
        },
        methods: {
            currentChange(value) {
                console.log(value)
            },
            handleSelectionChange(value) {
                console.log(value)
                this.selecteData = value
            },
            onDelete() {
                //请求api， 批量删除
                console.log(this.selecteData)
            },
            handleEdit(index, row) {
                console.log(index, row)
            },
            handleDelete(index, row) {
                console.log(index, row)
            },
            //监听选择每一页显示多少条数据
            handleSizeChange(newPageSize) {
                console.log(newPageSize)
            },
            //监听选择第几页的数据
            handleCurrentChange(newCurrentPage) {
                console.log(newCurrentPage)
            },
            open() {
                this.$message({
                    message: '这是一个成功消息',
                    type: 'success'
                })
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

简单确认对话框

1、消息提示示例代码：在handleDelete函数上添加调用对话框的内容

<template>
    这是c页面
    <h2>基础表格示例</h2>
    <el-card class="box-card">
        <template #header>
            <div class="card-hearder">
            <span>用户列表</span>
        </div>
        </template>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="city" label="城市" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column
                    label="操作"
                    flexd="right"
            >
                <template #default="scope">
                    <el-button
                            type="primary"
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                            type="danger"
                            size="small"
                            @click="handleDelete(scope.$index, scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="danger" @click="onDelete">批量删除</el-button>
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </el-card>
</template>

<script>
    export default {
        name: "C",
        data() {
            return {
                tableData: [
                    {
                        name: 'zhangsan',
                        city: 'beijiing',
                        age: 22
                    },
                    {
                        name: 'lisi',
                        city: 'shanghai',
                        age: 30
                    },
                    {
                        name: 'laowang',
                        city: 'guangzhou',
                        age: 18
                    }
                ],
                selecteData: '',
            }
        },
        methods: {
            currentChange(value) {
                console.log(value)
            },
            handleSelectionChange(value) {
                console.log(value)
                this.selecteData = value
            },
            onDelete() {
                //请求api， 批量删除
                console.log(this.selecteData)
            },
            handleEdit(index, row) {
                console.log(index, row)
            },
            handleDelete(index, row) {
                this.$messageBox.confirm(
                    '确认要删除？',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'waring'
                    }
                )
                .then(() => {
                    //点击确认执行的操作
                    console.log('删除成功')
                })
                .catch(() => {
                    console.log('取消删除')
                })
            }
        }
    }
</script>

<style scoped>

</style>

2、效果展示

对话框2

对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。

适合定制性更大的场景。

1、示例代码

<template>
    <el-dialog
            title="编辑用户"
            v-model="dialogFormVisible"

    >
        <el-form :model="form" >
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="form.city"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </span>
        </template>
    </el-dialog>
    <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
</template>

<script>
    export default {
        name: "B",
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    name: '',
                    age: '',
                    sex: ''
                }
            }
        }
</script>

<style scoped>

</style>

2、效果展示

标签：el,vue,console,name,age,value,Element,Plus,组件
From： https://blog.51cto.com/devwanghui/6193473

6. Element Plus前端组件库

Element Plus前端组件库

大纲

Element Plus基本使用

Vue项目使用ElementPlus

ElementUI开发一个网站流程

容器布局

导航栏

导航栏基础

基于router动态生成导航栏

字体图标

左侧菜单栏折叠效果设计

栅格布局

头像信息处理

栅格布局介绍

卡片

表单

表单：校验规则

表单：自定义校验规则

表单：重置按钮

表单：提交前预验证

数据表格

边框、宽度、固定列

表格：单选

表格：多选

表格：数据批量删除

表格：排序

表格：自定义列模板

表格：分页

反馈组件

Alert提示

消息弹出框

简单确认对话框

对话框2

相关文章

赞助商

阅读排行

6. Element Plus前端组件库

Element Plus前端组件库

大纲

Element Plus基本使用

Vue项目使用ElementPlus

ElementUI开发一个网站流程

容器布局

导航栏

导航栏基础

基于router动态生成导航栏

字体图标

左侧菜单栏折叠效果设计

栅格布局

头像信息处理

栅格布局介绍

卡片

表单

表单： 校验规则

表单： 自定义校验规则

表单： 重置按钮

表单： 提交前预验证

数据表格

边框、宽度、固定列

表格： 单选

表格： 多选

表格： 数据批量删除

表格： 排序

表格：自定义列模板

表格： 分页

反馈组件

Alert提示

消息弹出框

简单确认对话框

对话框2

相关文章

赞助商

阅读排行

表单：校验规则

表单：自定义校验规则

表单：重置按钮

表单：提交前预验证

表格：单选

表格：多选

表格：数据批量删除

表格：排序

表格：分页