element-plus:datePicker日期选择器、table表格、分页、对话框学习
点击查看代码
<template><div><!-- datePicker日期选择器 --><div style="margin: 20px"><el-date-pickerv-model="data.date1"type="date"placeholder="请选择日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"/>{{ data.date1 }}<el-date-pickerstyle="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-pickerstyle="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-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]"backgroundlayout="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 = rowdata.dialogVisible = true
}
const del = (id) =>{alert("删除ID=" + id + "的数据")
}
data.tableData = data.tableData.splice(0,5) //假数据处理
</script>
