项目：03-Element-Plus组件使用速成

## 一：文本框 input
#### 1.基本使用
data中设置变量，用表单绑定值。
#### 2.disabled和readonly属性
只显示文本，无法输入
disabled：禁用（灰色背景）
readonly：只读
#### 3.前置图标和后置图标
需要单独导入图标
#### 4.多行文本
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/d621589e-a730-4d50-3a0a-8ea1add81583.png)
## 二：下拉框 select
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/e1abb515-4bad-8572-b826-3e85e2c4a956.png)
## 三：单选按钮 radio
#### 1.基本使用
#### 2.单选按钮组
常用于页面内容切换
⭐要保证v-model里面的值和value的值对应上
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/3a63c25c-81ed-d328-446c-1979893d2e58.png)
## 四：多选按钮 checkbox
多选框绑定的是数组
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/e8bfa50e-d259-1c68-505d-d530a4f0d020.png)
## 五：图片 image
如果想使用本地的图片路径，必须先导入
图片预览:preview-src-list
放大 缩小 旋转...
```java
    <div style="margin: 20px 0"> 
      <el-image :src="img" style="width: 100px;margin-left: 100px"  :preview-src-list="[img,'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg']"/>
    </div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/2c4bb54b-b908-f7a8-b90d-e2b2e7f0ff7e.png)
## 六：轮播图-走马灯 carousel
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/9207ddf4-5a43-f225-e1fd-10d43b528911.png)
## 七：日期时间 date-picker
#### 1.日期
```java
    <div style="margin: 20px 0">
      <el-date-picker
        v-model="data.date"
        type="date"
        placeholder="请选择日期"
        format="YYYY/MM/DD"
        value-format="YYYY/MM/DD"
      /> {{ data.date }}
    </div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/abdc5837-4b77-2bfe-9c37-f7c355a95acb.png)
#### 2.时间
```java
      <el-date-picker style="margin-left: 50px "
        v-model="data.time"
        type="datetime"
        placeholder="请选择时间"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
      />{{ data.time }}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/3b27fea8-6ae2-1b77-388c-3e34acc1fa0a.png)
#### 3.日期时间
```java
      <el-date-picker style="margin-left: 50px "
        v-model="data.date1"
        type="datetime"
        placeholder="请选择日期时间"
        format="YYYY/MM/DD HH:mm:ss"
        value-format="YYYY/MM/DD HH:mm:ss"
      />{{ data.date1 }}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/121e1148-048d-eea2-54a8-336b7af1b3fd.png)
#### 4.日期范围
```java
      <el-date-picker style="margin-left: 50px"
        v-model="data.daterange"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/03025830-24ca-3e50-ae0a-c12edaafd841.png)
## 八：数据表格 table
```java
    <div style="margin: 20px 0"> 
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作栏">
        // 拿到行对象的数据
          <template #default="scope">
            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  tableData:[
    { date:'2024-12-11',name:'汪苏泷',address:'北京'},
    { date:'2020-12-11',name:'李宇春',address:'成都'},
    { date:'1995-12-11',name:'魏大勋',address:'沈阳'},
  ]    

const del = (id)=>{
  alert("删除ID="+id+"的数据")
}  
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/3e5b597a-290c-51c2-cd8a-e9511fa32d97.png)
## 九：分页组件 pagination
```java
<div style="padding: 10px 0">
        <el-pagination
          v-model:current-page="data.currentPag4"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.tableData.length"
        />
</div>

  currentPage:2, // 当前页码
  pageSize:5, // 每页几条     
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/ff38d40a-23c6-c09e-9071-8f02434edb91.png)
## 十：弹窗 Dialog 对话框
主要作用：新增或编辑数据
dialogVisible:控制弹窗显示的一个变量
```java
<el-table-column label="操作栏">
    <template #default="scope">
        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
    </template>
</el-table-column>

        
<el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
    <div style="padding: 20px">
        <div style="margin-bottom: 10px">日期：{{ data.row.date }}</div>
        <div style="margin-bottom: 10px">名称：{{ data.row.name }}</div>
        <div>地址：{{ data.row.address }}</div>
    </div>
</el-dialog>

dialogVisible:false,
row:null

const edit = (row)=>{
data.row=row
data.dialogVisible=true
}   
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/0fe48c92-eb99-171b-0ec8-21fd99d1d08a.png)