Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件

一. 环境准备

介绍：create-vue 是Vue官方提供的脚手架工具，用于快速生成一个工程化的Vue项目
create-vue 提供了：统一的目录结构、本地调试、热部署、单元测试、集成打包上线
依赖环境：NodeJs：是一个免费、开源、跨平台的JavaScript运行环境
安装NodeJs

(1) 官网下载 | Node.js 中文网

(2) 验证是否安装成功

npm：Node Package Manager，是NodeJS的软件管理器

(1) 配置 npm的全局安装路径(指向nodeJS的安装目录)

(2) 切换为淘宝镜像，加速下载(npm insert 下载软件包时，默认是从远程仓库下载，速度较慢)

二. Vue项目简介

1. Vue 工程化项目创建

执行命令 npm create vue@3.3.4（@3.3.4为create-vue脚手架工具的版本，不指定则默认下载最新版本）

2. Vue项目-启动

(1) 执行命令：npm run dev 就可以启动Vue项目

① 命令行启动

② vsCode中启动

*.vue是vue项目中的组件文件，在Vue项目中也称为单文件组件（SEC，Single-FileComponents)。Vue的单文件组件会将一个组件的逻辑（Js），模板（HTML）和样式（CSS）封装在同一个文件里(*.vue）

三. API风格

Vue 的组件有两种不同的风格：选项式API 和组合式API

1. 选项式API

(1) 选项式API：可以包含多个选项的对象来描述组件的逻辑，如data、methods、mounted等，选项定义的属性会暴露在函数内部的this上，他会指向当前的组件实例

2. 组合式API

是Vue3中提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑，提提供了一种更灵活、更可组合的方式来编写组件

四. ElementPlus

ElementPlus：是饿了么团队研发的，基于Vue3，面向设计师和开发者的组件库

2.组件：组成网页的部分，例如，超链接、按钮、图片、表格、表单、分页条等等

官网：一个 Vue 3 UI 框架 | Element Plus

五. Element Plus 快速入门

创建vue项目

参照官方文档，安装Element Plus组件库(在当前工程的目录下)： npm insert element-plus@2.4.4 --save 不指定版本默认按照最新版本

-- save 代表当前所安装的依赖信息保存到 package.json 中

main.js中引入Element Plus组件库

新建vue文件

使用ElementPlus组件

html 复制代码

<script setup>

</script>

<template>
 <div class="button-example">
    <div class="button-row">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <div class="button-row">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </div>

    <div class="button-row">
      <el-button round>Round</el-button>
      <el-button type="primary" round>Primary</el-button>
      <el-button type="success" round>Success</el-button>
      <el-button type="info" round>Info</el-button>
      <el-button type="warning" round>Warning</el-button>
      <el-button type="danger" round>Danger</el-button>
    </div>

    <div class="button-row">
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </div>
  </div>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}
</style>

六. ElementPlus 常见组件-表格组件

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

官网给了许多表格样式，可根据自己需求使用

html 复制代码

<template>
 <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
  <!-- 字段名称 对应列内容的字段名， 也可以使用 property属性
     label表头   width表格宽度 -->
    <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>

<script setup>

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

const tableData = [
  {
    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>

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

七. ElementPlus常见组件-分页条组件

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

html 复制代码

<template>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40, 50, 60 ]" 
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// :page-sizes="[10, 20, 30, 40, 50, 60 ]  分页下拉框 每页展示多少条数据
// layout="total, sizes, prev, pager, next, jumper" 
// 分页条组件布局  total总记录数  sizes每页展示多少条下拉框 prev上一页  pager页码 next下一页 jumper跳转
//  @size-change 每页展示多少条变化时触发的事件
// @current-change 当前页面发生变化时 触发的事件
const currentPage4 = ref(4); // 当前页码
const pageSize4 = ref(100); // 每页展示的记录数
const total = ref(300); // 总记录数
const background = ref(true); // 是否为分页按钮加背景色
const disabled = ref(false); // 是否被禁用 true被禁用 

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

默认ElementPlus的组件是英文的，如果要使用中文，可以配置中文语言