《Vue3实战》第十章 Element plus指南

谁借莪１个温暖的怀抱￠ 2023-09-26 20:45 65阅读 0赞

《Vue3实战》篇章整体栏目  
—————————————————————————————  
[【第一章】node.js/npm安装、配置][node.js_npm]  
[【第二章】创建项目和目录结构][Link 1]  
[【第三章】基础语法][Link 2]  
[【第四章】条件语句、循环语句][Link 3]  
[【第五章】计算、监听属性][Link 4]  
[【第六章】样式绑定和事件处理][Link 5]  
[【第七章】表单][Link 6]  
[【第八章】自定义指令][Link 7]  
[【第九章】路由][Link 8]  
[【第十章】Element plus指南][Element plus]  
【第十一章】Vue3实战之打造新闻系统前端模板  
—————————————————————————————

#### 目录 ####

*  前言
 *  1、npm 安装
 *  2、完整引入 Element Plus
 *  3、按需引入 Element Plus
 *  4、其他组件使用
 *  4.1、Button 按钮
 *  4.2、Table 表格

—————————————————————————————

## 前言 ##

Element Plus 教程(beta版，适配 Vue 3.0 的 Element)  
国内访问地址：https://www.bookstack.cn/read/element-plus-beta  
PS：比官网要稳定、快捷

## 1、npm 安装 ##

> npm install element-plus --save

## 2、完整引入 Element Plus ##

在 main.js 中写入以下内容：

import {
         createApp } from 'vue'
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    import App from './App.vue';
    const app = createApp(App)
    app.use(ElementPlus)
    app.mount('#app')

## 3、按需引入 Element Plus ##

如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容

import {
         createApp } from 'vue'
    import {
         ElButton, ElSelect } from 'element-plus';
    import App from './App.vue';
    const app = createApp(App)
    app.component(ElButton.name, ElButton);
    app.component(ElSelect.name, ElSelect);
    /* or
     * app.use(ElButton)
     * app.use(ElSelect)
     */
    app.mount('#app')

## 4、其他组件使用 ##

基础组件：https://www.bookstack.cn/read/element-plus-beta/Basic.md  
表单组件：https://www.bookstack.cn/read/element-plus-beta/Form.md  
数据组件：https://www.bookstack.cn/read/element-plus-beta/data.md  
消息组件：https://www.bookstack.cn/read/element-plus-beta/Notice.md  
导航组件：https://www.bookstack.cn/read/element-plus-beta/Navigation.md  
其他组件：https://www.bookstack.cn/read/element-plus-beta/Others.md

## 4.1、Button 按钮 ##

基础的按钮用法。  
![Button 按钮 - 图1][Button _ - _1]  
使用type、plain、round和circle属性来定义 Button 的样式。

<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>

## 4.2、Table 表格 ##

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。  
![在这里插入图片描述][bf4e0c477cc04e1c8d9429840be5c0c9.png]  
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </template>
      <script>
        export default {
        
          data() {
        
            return {
        
              tableData: [{
        
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
        
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
        
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
        
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }]
            }
          }
        }
      </script>

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[Button _ - _1]: https://img-blog.csdnimg.cn/fae3dc3e6c4c44589ea4e6e6a5ed7114.png
[bf4e0c477cc04e1c8d9429840be5c0c9.png]: https://img-blog.csdnimg.cn/bf4e0c477cc04e1c8d9429840be5c0c9.png