element组件学习2

element-plus:datePicker日期选择器、table表格、分页、对话框学习

点击查看代码

<template>
  <div>
  
    <!--   datePicker日期选择器   -->
    <div style="margin: 20px">
      <el-date-picker
          v-model="data.date1"
          type="date"
          placeholder="请选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />{{ data.date1 }}

      <el-date-picker
          style="margin-left: 50px"
          v-model="data.date2"
          type="datetime"
          placeholder="请选择日期时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
      />{{ data.date2 }}

      <el-date-picker
          style="margin-left: 50px"
          v-model="data.daterange"
          type="daterange"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />{{ data.daterange?.length ? data.daterange[0] : '' }} {{ data.daterange?.length ? data.daterange[1] : '' }}
    </div>

    <!--   table表格   -->
    <div style="margin: 20px">
      <el-table :data="data.tableData" style="width: 100%" stripe>
        <el-table-column prop="date" label="日期" width="180" header-align="center"  />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" circle @click="edit(scope.row)">
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button type="danger" circle @click="del(scope.row.id)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column type="selection"/>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
            v-model:current-page="data.currentPage"
            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>
    </div>


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

<script setup>
import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";
//image使用本地图片路径，先导入
import img from '@/assets/logo.svg';
import lun1 from '@/assets/1.jpg';
import lun2 from '@/assets/2.jpg';
import lun3 from '@/assets/3.jpg';
import lun4 from '@/assets/4.jpg';

const data = reactive({
  input: '呵呵',
  descr: '用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。',
  value1: '',
  value2: '',
  options1: ['唱', '跳', 'rap', '篮球'],
  options2: [{id: 1, name: '唱'}, {id: 2, name: '跳'}, {id: 3, name: 'rap'}, {id: 4, name: '篮球'}],
  sex: '',
  tag: '',
  checkList: [],
  imgs: [lun1, lun2, lun3, lun4],
  date1: '',
  date2: '',
  daterange: null,
  currentPage: 1,
  pageSize: 5,
  tableData: [
    { id: 1 , date: '2024-10-11' , name: 'vivy' , address: '地球村' },
    { id: 2 , date: '2024-10-13' , name: '嗷呜' , address: '银河城' },
    { id: 3 , date: '2024-10-19' , name: '咩啊' , address: '地球村' },
  ],
  dialogVisible: false,
  row: null,

})

const edit = (row) =>{
  data.row = row
  data.dialogVisible = true
}
const del = (id) =>{
  alert("删除ID=" + id + "的数据")
}
data.tableData = data.tableData.splice(0,5) //假数据处理
</script>