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

一：文本框 input

1.基本使用

data中设置变量，用表单绑定值。

2.disabled和readonly属性

只显示文本，无法输入
disabled：禁用（灰色背景）
readonly：只读

3.前置图标和后置图标

需要单独导入图标

4.多行文本

二：下拉框 select

三：单选按钮 radio

1.基本使用

2.单选按钮组

常用于页面内容切换
⭐要保证v-model里面的值和value的值对应上

四：多选按钮 checkbox

多选框绑定的是数组

五：图片 image

如果想使用本地的图片路径，必须先导入
图片预览:preview-src-list
放大 缩小 旋转...

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

六：轮播图-走马灯 carousel

七：日期时间 date-picker

1.日期

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

2.时间

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

3.日期时间

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

4.日期范围

      <el-date-picker style="margin-left: 50px"
        v-model="data.daterange"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />

八：数据表格 table

    <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+"的数据")
}  

九：分页组件 pagination

<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, // 每页几条     

十：弹窗 Dialog 对话框

主要作用：新增或编辑数据
dialogVisible:控制弹窗显示的一个变量

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