学习Element Plus 未完结。。。尽情期待

1.安装ElementPlus:

        (1)我们在创建的Vue项目根目录下通过命令安装ElementPlus:     

                                     npm install element-plus --save

        (2)然后在package.json文件中检查是否安装成功：

  "dependencies": {
    "element-plus": "^2.8.2",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },

        (3)在main.js或main.ts中引入ElementPlus:

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

        (4)这样就完成了 Element Plus 的安装和全局引入。您可以开始在 Vue 应用中使用 Element Plus 提供的组件了

2.ElementPlus表格基本操作以及属性

        (1)创建表格

                使用<el-table>组件创建表格，并通过:data属性绑定表格数据（一个对象数组）。

                使用<el-table-column>定义表格列，通过prop属性指定每列对应的数据字段，label属性设置列头显示的文本。

        (2)数据操作

                添加数据：向绑定的数据数组中添加新的对象，Vue的响应式系统会自动更新表格显示。

                删除数据：从绑定的数据数组中移除对象，表格会相应更新。

                更新数据：直接修改绑定数组中的对象属性，表格会实时反映变化。

        (3) 表格功能

                排序：使用sortable属性开启列的排序功能，可通过sort-method自定义排序逻辑。

                筛选：使用filter-method和filters实现列的筛选功能。

                分页：配合<el-pagination>组件实现分页显示，通过v-model:current-page和:page-size绑定当前页码和每页显示条数。

        (4)表格样式与布局

                列宽：通过<el-table-column>的width属性设置列宽，可以是像素值或百分比。

                固定列：设置<el-table-column>的fixed属性为left或right，可以将列固定在表格的左侧或右侧。

                斑马线：通过<el-table>的stripe属性开启斑马线效果，使表格行间隔色显示。

                边框：通过<el-table>的border属性控制表格是否显示边框。

        (5)自定义内容

                自定义列模板：在<el-table-column>中使用#default定义自定义模板，可以插入按钮、输入框等组件进行复杂操作。

                合并单元格：虽然Element Plus的<el-table>组件不直接支持合并单元格，但可以通过自定义列模板和计算属性间接实现。

        (6)事件处理

                行选择：通过监听<el-table>的selection-change事件获取当前选中的行。

                排序变化：监听<el-table>的sort-change事件获取排序信息。

                单元格点击：监听<el-table>的cell-click事件处理单元格点击事件。

<template>
  <div>
    <el-table :data="tableDate" stripe style="width: 600px;">
    <el-table-column prop="id" label="Id"/>
    <el-table-column prop="name" label="Name"/>
    <el-table-column prop="sex" label="Sex"/>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" >修改</el-button>
        <el-button size="small" type="danger">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
const tableDate=[
  {
    id:1,
    name:'zml',
    sex:'男',
  },
  {
    id:2,
    name:'ZhaoWei',
    sex:'女',
  },
  {
    id:3,
    name:'ZhangMingLi',
    sex:'男',
  },
  {
    id:4,
    name:'zw',
    sex:'女',
  },
]
</script>