6. Element Plus前端组件库

alexhuiwang

发布于 2023-04-24 10:14:11

5K0

发布于 2023-04-24 10:14:11

文章被收录于专栏：运维博客运维博客

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、效果展示

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-04-16，如有侵权请联系 cloudcommunity@tencent.com 删除

element

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！