springboot+Vue day02 Element-plus的使用
·
安装
进入到我们自己的项目中：
可以直接在ide里面，打开终端，输入命令即可。
npm install element-plus --save
安装完之后，我们可以在项目的 node-modules中找到 element-plus的包
使用
进入官网，点击指南，快速开始，直接使用即可。
1. 文本框
常见的文本框，我们使用v-model进行绑定，获取用户的输入。
如果想要在前面显示角标：：prefix-icon
<el-input
v-model="textinput"
class="responsive-input"
placeholder="Pick a date"
clearable
style="width: 200px"
:prefix-icon="Calendar"
/>
import {ref} from 'vue'
import {Calendar} from '@element-plus/icons-vue' // **使用哪个小图标，这个是需要引入**的
const textinput = ref('');
如果想要在后面显示角标：: suffix-icon.(注意这些图标都需要进行单独导入）
<el-input
v-model="textinput"
class="responsive-input"
placeholder="Pick a date"
clearable
style="width: 200px"
:suffix-icon="Calendar"
/>
多行文本：text-area
如果只想要只读或者是不允许编写：readonly disabled
<el-input
v-model="textinput"
class="responsive-input"
placeholder="Pick a date"
clearable
style="width: 200px"
:prefix-icon="Calendar"
readonly 或者是 disabled
/>
<template>
<el-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
2. 下拉框
其实就是用来下拉选择我们需要的选项即可。
注意，所有的选择框，必须要保证id唯一
- 正常普通的选择
<el-select v-model="value" placeholder="Select" style="width: 240px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> {{ value }}
import {ref} from 'vue'
import {Calendar} from '@element-plus/icons-vue'
const textinput = ref('');
const value = ref('')
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
]
- 多选：
- 可以清空， clearable. 其实所有可输入的内容，我们都是可以使用这个方式进行清空。
- 多选
<el-select
v-model="selectedIds"
multiple
placeholder="请选择人员"
style="width: 20%"
>
<el-option
v-for="person in personList"
:key="person.id"
:label="person.name"
:value="person.id"
/>
</el-select>
const personList = [
{ name: '张三', id: 1 },
{ name: '李四', id: 2 },
{ name: '王五', id: 3 },
{ name: '赵六', id: 4 },
{ name: '钱七', id: 5 },
{ name: '孙八', id: 6 }
]
下拉框中：option，一般需要的属性是 key, label,value
3. 单选框 radio
进行单选,相对简单
<el-radio-group v-model="radioinput">
<el-radio-button label="唱" />唱
<el-radio-button label="跳" />跳
<el-radio-button label="rap" />rap
</el-radio-group>
<h3>单选框2</h3>
<el-radio-group v-model="radio1input">
<el-radio value="1" size="large">男</el-radio>
<el-radio value="2" size="large">女</el-radio>
</el-radio-group>
4. 多选框 checkbox
其实相对来讲，这些东西都是比较简单的，直接去官网上获取示例，然后改改就可以用了。
<div>
<h2>5. checkbox多选框</h2>
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="item in checkoutList" :label="item.label" :value="item.value" />
</el-checkbox-group> <span style="margin-left: 20px">{{ checkList }}</span>
</div>
const checkoutList = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
}
]
5. 图片显示 el-image
使用 el-image，如果使用本地的图片，必须先导入。
<el-image :src="img" fit="contain"></el-image>
import {Calendar} from '@element-plus/icons-vue'
如果想要进行旋转，放大，缩小等内容。 添加 :preview-src-list即可。但是这个是一个列表，如果我们只预览这一张图片，可以直接 [ url ]。 如果想要展示多张，那么直接把需要预览的图片，放进来即可。（比如我们想要做商品详情，就可以使用这种，点击进来，可以展示整个商品的图片）
<el-image
style="width: 100px; height: 100px"
:src="url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
show-progress
:preview-src-list="[url]"
:initial-index="4"
fit="cover"
/>
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
6. 轮播图 el-Carousel (走马灯)
<div>
<h2>7. 图片跑马灯</h2>
<div class="carousel-container">
<el-carousel height="300px" style="width: 550px">
<el-carousel-item v-for="item in srcList" :key="item">
<el-image :src="item" style="text-align: center"></el-image>
</el-carousel-item>
</el-carousel>
</div>
</div>
const srcList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
7. 时间和日期控件
时间和日期一共有三种，日期选择器 Date Picker，日期时间选择器 Datetime Picker，时间选择器 TimePicker 。
这些基本就能满足我们的要求了
- 日期 DatePicker
<div>
<h2>8. 日期选择器</h2>
<span class="demonstration">请输入您的生日</span>
<el-date-picker
v-model="dateInput"
type="date"
placeholder="Pick a day"
:size="size"
/>
</div> {{ dateInput }}
const dateInput = ref('')
显示的内容是：一个标准的日期格式，但是通常我们不需要这种给你方式。所以我们一般会转换成字符串。
这个时候，我们需要使用实际值：value-forrmat ，输入的格式使用 format的方式。
可以进行格式化，方式有很多，也可以使用时间戳。
<div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value：{{ valueformatDate }}</div>
<el-date-picker
v-model="valueformatDate"
type="date"
placeholder="Pick a Date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
</div>
- 时间 DateTimePicker
](https://i-blog.csdnimg.cn/direct/2e008e4aa6a64f5f8ee12e8c46167a6d.png)
<div>
<h2>9. 时间选择器，依旧使用格式化输出的</h2>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value：{{ datetimeInput }}</div>
<el-date-picker
v-model="datetimeInput"
type="datetime"
placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s a"
/>
</div>
</div>
- 时间选择器
<div>
<h2>10. 时间选择器</h2>
<el-time-picker v-model="timeInput" placeholder="请输入时间" value-format="HH:mm:ss"/>
{{ timeInput }}
</div>
9. 数据表格 el-table
主要分为 el-table, el-table-column(表头)，el-table-data。这个表格的格式有非常多的形式，可以参考官网的内容。但是使用的方式都是一样的，无非复制一下官网的代码，根据自己的需要修改一下。
- 基本使用
<div>
<h2>11. 表格</h2>
<el-table :data="tableData" stripe style="width: 50%">
<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 prop="sno" label="学号" />
</el-table>
</div>
const tableData = [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
]
带插槽的表格（可以进行操作的），主要是用来进行增删查改的部分。
<div>
<h2>11. 带插槽的表格</h2>
<el-table :data="showDate" stripe style="width: 80%">
<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 prop="sno" label="学号" />
<el-table-column label="操作">
<template #default="scope"> <!-- 可以获取当当前的行对象 -->
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
10. 分页组件
如果上面的报表的内容过多，那么我们可以使用分页进行数据的展示。（根据我们的需求，当需要请求数据的时候，我们采取获取并展示数据）
功能实现了对上面的表格，进行跳转的所有操作
<div>
<h2>12. 分页</h2>
<el-pagination
v-model:current-page="pages.currentPage4"
v-model:page-size="pages.pageSize4"
:page-sizes="[10, 20, 50, 100, 500]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
const tableData = [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-04', name: '李小明', address: '北京市朝阳区建国门外大街 1 号', sno: '20210002'},
{date: '2016-05-06', name: '张小红', address: '广州市天河区珠江新城花城大道 68 号', sno: '20210003'},
{date: '2016-05-08', name: '陈小华', address: '深圳市南山区科技园南区 12 栋', sno: '20210004'},
{date: '2016-05-10', name: '刘小强', address: '杭州市西湖区文三路 199 号', sno: '20210005'},
{date: '2016-05-12', name: '赵小燕', address: '南京市鼓楼区中山北路 32 号', sno: '20210006'},
{date: '2016-05-14', name: '黄小伟', address: '成都市武侯区人民南路四段 12 号', sno: '20210007'},
{date: '2016-05-16', name: '周小芳', address: '武汉市江汉区建设大道 518 号', sno: '20210008'},
{date: '2016-05-18', name: '吴小刚', address: '西安市雁塔区高新路 88 号', sno: '20210009'},
{date: '2016-05-20', name: '郑小丽', address: '重庆市渝中区解放碑步行街 26 号', sno: '20210010'},
{date: '2016-05-22', name: '孙小军', address: '苏州市工业园区金鸡湖大道 88 号', sno: '20210011'},
{date: '2016-05-24', name: '朱小梅', address: '天津市和平区南京路 189 号', sno: '20210012'},
{date: '2016-05-26', name: '马小云', address: '长沙市芙蓉区五一大道 368 号', sno: '20210013'},
{date: '2016-05-28', name: '胡小兵', address: '郑州市金水区花园路 85 号', sno: '20210014'},
{date: '2016-05-30', name: '林小霞', address: '青岛市市南区香港中路 12 号', sno: '20210015'},
{date: '2016-06-01', name: '郭小杰', address: '大连市中山区人民路 23 号', sno: '20210016'},
{date: '2016-06-03', name: '何小敏', address: '宁波市鄞州区钱湖北路 58 号', sno: '20210017'},
{date: '2016-06-05', name: '高小龙', address: '厦门市思明区湖滨北路 42 号', sno: '20210018'},
{date: '2016-06-07', name: '罗小婷', address: '无锡市滨湖区太湖大道 128 号', sno: '20210019'},
{date: '2016-06-09', name: '梁小波', address: '佛山市禅城区季华五路 28 号', sno: '20210020'},
{date: '2016-06-11', name: '谢小娜', address: '东莞市南城区鸿福路 200 号', sno: '20210021'},
{date: '2016-06-13', name: '宋小辉', address: '合肥市包河区马鞍山路 100 号', sno: '20210022'},
{date: '2016-06-15', name: '唐小艳', address: '福州市鼓楼区五四路 158 号', sno: '20210023'},
{date: '2016-06-17', name: '许小强', address: '昆明市官渡区春城路 60 号', sno: '20210024'},
{date: '2016-06-19', name: '韩小雪', address: '哈尔滨市道里区中央大街 89 号', sno: '20210025'},
{date: '2016-06-21', name: '冯小宇', address: '长春市朝阳区人民大街 288 号', sno: '20210026'},
{date: '2016-06-23', name: '邓小文', address: '沈阳市和平区青年大街 390 号', sno: '20210027'},
{date: '2016-06-25', name: '曹小静', address: '济南市历下区泺源大街 66 号', sno: '20210028'},
{date: '2016-06-27', name: '彭小飞', address: '太原市小店区长治路 88 号', sno: '20210029'},
{date: '2016-06-29', name: '曾小玲', address: '南宁市青秀区民族大道 88 号', sno: '20210030'},
{date: '2016-07-01', name: '萧小峰', address: '海口市龙华区国贸大道 26 号', sno: '20210031'},
{date: '2016-07-03', name: '田小慧', address: '贵阳市云岩区中华北路 78 号', sno: '20210032'},
{date: '2016-07-05', name: '董小军', address: '拉萨市城关区北京中路 65 号', sno: '20210033'},
{date: '2016-07-07', name: '潘小燕', address: '银川市兴庆区解放东街 28 号', sno: '20210034'},
{date: '2016-07-09', name: '袁小明', address: '乌鲁木齐市天山区光明路 30 号', sno: '20210035'},
{date: '2016-07-11', name: '于小华', address: '西宁市城中区西大街 42 号', sno: '20210036'},
{date: '2016-07-13', name: '蒋小丽', address: '兰州市城关区天水路 88 号', sno: '20210037'},
{date: '2016-07-15', name: '蔡小刚', address: '呼和浩特市新城区中山东路 20 号', sno: '20210038'},
{date: '2016-07-17', name: '余小敏', address: '南昌市东湖区阳明路 66 号', sno: '20210039'},
{date: '2016-07-19', name: '杜小伟', address: '贵阳市南明区遵义路 102 号', sno: '20210040'},
{date: '2016-07-21', name: '丁小芳', address: '温州市鹿城区车站大道 200 号', sno: '20210041'},
{date: '2016-07-23', name: '沈小强', address: '绍兴市越城区解放北路 88 号', sno: '20210042'},
{date: '2016-07-25', name: '姜小梅', address: '泉州市丰泽区津淮街 36 号', sno: '20210043'},
{date: '2016-07-27', name: '范小云', address: '金华市婺城区双龙南街 68 号', sno: '20210044'},
{date: '2016-07-29', name: '江小兵', address: '珠海市香洲区情侣中路 88 号', sno: '20210045'},
{date: '2016-07-31', name: '傅小霞', address: '中山市东区中山三路 16 号', sno: '20210046'},
{date: '2016-08-02', name: '钟小杰', address: '惠州市惠城区江北文明一路 8 号', sno: '20210047'},
{date: '2016-08-04', name: '卢小敏', address: '江门市蓬江区建设路 38 号', sno: '20210048'},
{date: '2016-08-06', name: '汪小龙', address: '汕头市金平区长平路 98 号', sno: '20210049'},
{date: '2016-08-06', name: '汪小龙', address: '汕头市金平区长平路 98 号', sno: '20210049'},
{date: '2016-08-06', name: '汪小龙', address: '汕头市金平区长平路 98 号', sno: '20210049'},
{date: '2016-08-08', name: '陆小婷', address: '湛江市赤坎区跃进路 28 号', sno: '20210050'},]
const showDate = ref(tableData.slice(0, 10))
const handleSizeChange = (val) => {
console.log(`每页 ${val} 条`)
pages.value.pageSize4 = val
pages.value.currentPage4 = 1 // 重置到第一页
updateShowDate()
}
const handleCurrentChange = (val) => {
console.log(`当前页: ${val}`)
pages.value.currentPage4 = val
updateShowDate()
}
const updateShowDate = () => {
const start = (pages.value.currentPage4 - 1) * pages.value.pageSize4
const end = start + pages.value.pageSize4
showDate.value = tableData.slice(start, end)
}
11 弹窗 Dialog
弹窗通常用来展示页面的详细数据。
<div>
<h2>13. 打开对话框</h2>
<el-button class="!ml-0" plain @click="dialogFormVisible = true">
Open a Form nested Dialog
</el-button>
<el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
<div>
这是弹窗展示出来的内容
</div>
</el-dialog>
</div>
总结：所有的代码如下
<template>
<div>
<h1>Vue的使用案例</h1>
<div>
<h2>1. input输入内容</h2>
<el-input
v-model="textinput"
class="responsive-input"
placeholder="Pick a date"
clearable
style="width: 200px"
:prefix-icon="Calendar"
readonly 或者是 disabled
/>
</div>
<div>
<h2>2. 下拉框</h2>
<el-select v-model="value" placeholder="Select" style="width: 240px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> {{ value }}
</div>
<div style="margin-top: 20px">
<h2>3. 多选框</h2>
<el-select-v2
v-model="valueMul"
:options="optionsMul"
placeholder="Please select"
style="width: 240px"
multiple
/> {{ valueMul }}
<div>
<el-select
v-model="selectedIds"
multiple
placeholder="请选择人员"
style="width: 20%"
>
<el-option
v-for="person in personList"
:key="person.id"
:label="person.name"
:value="person.id"
/>
</el-select> {{ selectedIds }}
</div>
</div>
<div>
<h2>4. 单选框</h2>
<el-radio-group v-model="radioinput">
<el-radio-button label="唱" />唱
<el-radio-button label="跳" />跳
<el-radio-button label="rap" />rap
</el-radio-group>
<h3>单选框2</h3>
<el-radio-group v-model="radio1input">
<el-radio value="1" size="large">男</el-radio>
<el-radio value="2" size="large">女</el-radio>
</el-radio-group>
</div>
<div>
<h2>5. checkbox多选框</h2>
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="item in checkoutList" :label="item.label" :value="item.value" />
</el-checkbox-group> <span style="margin-left: 20px">{{ checkList }}</span>
</div>
<div>
<h2>7. 图片跑马灯</h2>
<div class="carousel-container">
<el-carousel height="300px" style="width: 550px">
<el-carousel-item v-for="item in srcList" :key="item">
<el-image :src="item" style="text-align: center"></el-image>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div>
<h2>6. 图片展示相关</h2>
<el-image
style="width: 100px; height: 100px"
:src="url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
show-progress
:preview-src-list="[url]"
:initial-index="4"
fit="cover"
/>
<el-image :src="img" fit="contain"></el-image>
</div>
<div>
<h2>8. 日期选择器</h2>
<span class="demonstration">请输入您的生日</span>
<el-date-picker
v-model="dateInput"
type="date"
placeholder="Pick a day"
:size="size"
/>
</div> {{ dateInput }}
<div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value：{{ valueformatDate }}</div>
<el-date-picker
v-model="valueformatDate"
type="date"
placeholder="Pick a Date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
</div>
<div>
<h2>9. 时间选择器，依旧使用格式化输出的</h2>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value：{{ datetimeInput }}</div>
<el-date-picker
v-model="datetimeInput"
type="datetime"
placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s a"
/>
</div>
</div>
<div>
<h2>10. 时间选择器</h2>
<el-time-picker v-model="timeInput" placeholder="请输入时间" value-format="HH:mm:ss"/>
{{ timeInput }}
</div> </div>
<div>
<h2>11. 表格</h2>
<el-table :data="showDate" stripe style="width: 50%">
<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 prop="sno" label="学号" />
</el-table>
</div>
<div>
<h2>11. 带插槽的表格</h2>
<el-table :data="showDate" stripe style="width: 80%">
<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 prop="sno" label="学号" />
<el-table-column label="操作">
<template #default="scope"> <!-- 可以获取当当前的行对象 -->
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div>
<h2>12. 分页</h2>
<el-pagination
v-model:current-page="pages.currentPage4"
v-model:page-size="pages.pageSize4"
:page-sizes="[10, 20, 50, 100, 500]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<div>
<h2>13. 打开对话框</h2>
<el-button class="!ml-0" plain @click="dialogFormVisible = true">
Open a Form nested Dialog
</el-button>
<el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
<div>
这是弹窗展示出来的内容
</div>
</el-dialog>
</div>
</template>
<script setup>
import {ref } from 'vue'
import {Calendar} from '@element-plus/icons-vue'
import img from '@/assets/logo.svg'
const textinput = ref('');
const dialogFormVisible = ref(false)
const value = ref('')
const valueMul = ref([])
const selectedIds = ref([])
const radioinput = ref('唱')
const radio1input = ref('1')
const checkList = ref([])
const dateInput = ref('')
const valueformatDate = ref('')
const datetimeInput = ref('')
const timeInput = ref('')
const pages = ref({
currentPage4: 1,
pageSize4: 10,
})
const tableData = [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', sno: '20210001'},
{date: '2016-05-04', name: '李小明', address: '北京市朝阳区建国门外大街 1 号', sno: '20210002'},
{date: '2016-05-06', name: '张小红', address: '广州市天河区珠江新城花城大道 68 号', sno: '20210003'},
{date: '2016-05-08', name: '陈小华', address: '深圳市南山区科技园南区 12 栋', sno: '20210004'},
{date: '2016-05-10', name: '刘小强', address: '杭州市西湖区文三路 199 号', sno: '20210005'},
{date: '2016-05-12', name: '赵小燕', address: '南京市鼓楼区中山北路 32 号', sno: '20210006'},
{date: '2016-05-14', name: '黄小伟', address: '成都市武侯区人民南路四段 12 号', sno: '20210007'},
{date: '2016-05-16', name: '周小芳', address: '武汉市江汉区建设大道 518 号', sno: '20210008'},
{date: '2016-05-18', name: '吴小刚', address: '西安市雁塔区高新路 88 号', sno: '20210009'},
{date: '2016-05-20', name: '郑小丽', address: '重庆市渝中区解放碑步行街 26 号', sno: '20210010'},
{date: '2016-05-22', name: '孙小军', address: '苏州市工业园区金鸡湖大道 88 号', sno: '20210011'},
{date: '2016-05-24', name: '朱小梅', address: '天津市和平区南京路 189 号', sno: '20210012'},
{date: '2016-05-26', name: '马小云', address: '长沙市芙蓉区五一大道 368 号', sno: '20210013'},
{date: '2016-05-28', name: '胡小兵', address: '郑州市金水区花园路 85 号', sno: '20210014'},
{date: '2016-05-30', name: '林小霞', address: '青岛市市南区香港中路 12 号', sno: '20210015'},
{date: '2016-06-01', name: '郭小杰', address: '大连市中山区人民路 23 号', sno: '20210016'},
{date: '2016-06-03', name: '何小敏', address: '宁波市鄞州区钱湖北路 58 号', sno: '20210017'},
{date: '2016-06-05', name: '高小龙', address: '厦门市思明区湖滨北路 42 号', sno: '20210018'},
{date: '2016-06-07', name: '罗小婷', address: '无锡市滨湖区太湖大道 128 号', sno: '20210019'},
{date: '2016-06-09', name: '梁小波', address: '佛山市禅城区季华五路 28 号', sno: '20210020'},
{date: '2016-06-11', name: '谢小娜', address: '东莞市南城区鸿福路 200 号', sno: '20210021'},
{date: '2016-06-13', name: '宋小辉', address: '合肥市包河区马鞍山路 100 号', sno: '20210022'},
{date: '2016-06-15', name: '唐小艳', address: '福州市鼓楼区五四路 158 号', sno: '20210023'},
{date: '2016-06-17', name: '许小强', address: '昆明市官渡区春城路 60 号', sno: '20210024'},
{date: '2016-06-19', name: '韩小雪', address: '哈尔滨市道里区中央大街 89 号', sno: '20210025'},
{date: '2016-06-21', name: '冯小宇', address: '长春市朝阳区人民大街 288 号', sno: '20210026'},
{date: '2016-06-23', name: '邓小文', address: '沈阳市和平区青年大街 390 号', sno: '20210027'},
{date: '2016-06-25', name: '曹小静', address: '济南市历下区泺源大街 66 号', sno: '20210028'},
{date: '2016-06-27', name: '彭小飞', address: '太原市小店区长治路 88 号', sno: '20210029'},
{date: '2016-06-29', name: '曾小玲', address: '南宁市青秀区民族大道 88 号', sno: '20210030'},
{date: '2016-07-01', name: '萧小峰', address: '海口市龙华区国贸大道 26 号', sno: '20210031'},
{date: '2016-07-03', name: '田小慧', address: '贵阳市云岩区中华北路 78 号', sno: '20210032'},
{date: '2016-07-05', name: '董小军', address: '拉萨市城关区北京中路 65 号', sno: '20210033'},
{date: '2016-07-07', name: '潘小燕', address: '银川市兴庆区解放东街 28 号', sno: '20210034'},
{date: '2016-07-09', name: '袁小明', address: '乌鲁木齐市天山区光明路 30 号', sno: '20210035'},
{date: '2016-07-11', name: '于小华', address: '西宁市城中区西大街 42 号', sno: '20210036'},
{date: '2016-07-13', name: '蒋小丽', address: '兰州市城关区天水路 88 号', sno: '20210037'},
{date: '2016-07-15', name: '蔡小刚', address: '呼和浩特市新城区中山东路 20 号', sno: '20210038'},
{date: '2016-07-17', name: '余小敏', address: '南昌市东湖区阳明路 66 号', sno: '20210039'},
{date: '2016-07-19', name: '杜小伟', address: '贵阳市南明区遵义路 102 号', sno: '20210040'},
{date: '2016-07-21', name: '丁小芳', address: '温州市鹿城区车站大道 200 号', sno: '20210041'},
{date: '2016-07-23', name: '沈小强', address: '绍兴市越城区解放北路 88 号', sno: '20210042'},
{date: '2016-07-25', name: '姜小梅', address: '泉州市丰泽区津淮街 36 号', sno: '20210043'},
{date: '2016-07-27', name: '范小云', address: '金华市婺城区双龙南街 68 号', sno: '20210044'},
{date: '2016-07-29', name: '江小兵', address: '珠海市香洲区情侣中路 88 号', sno: '20210045'},
{date: '2016-07-31', name: '傅小霞', address: '中山市东区中山三路 16 号', sno: '20210046'},
{date: '2016-08-02', name: '钟小杰', address: '惠州市惠城区江北文明一路 8 号', sno: '20210047'},
{date: '2016-08-04', name: '卢小敏', address: '江门市蓬江区建设路 38 号', sno: '20210048'},
{date: '2016-08-06', name: '汪小龙', address: '汕头市金平区长平路 98 号', sno: '20210049'},
{date: '2016-08-06', name: '汪小龙', address: '汕头市金平区长平路 98 号', sno: '20210049'},
{date: '2016-08-06', name: '汪小龙', address: '汕头市金平区长平路 98 号', sno: '20210049'},
{date: '2016-08-08', name: '陆小婷', address: '湛江市赤坎区跃进路 28 号', sno: '20210050'},]
const showDate = ref(tableData.slice(0, 10))
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const optionsMul = ref(
Array.from({ length: 1000 }).map((_, idx) => ({
value: `Option ${idx + 1}`,
label: `${initials[idx % 10]}${idx}`,
}))
)
const checkoutList = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
}
]
const pic = "@/assets/logo.svg"
const personList = [
{ name: '张三', id: 1 },
{ name: '李四', id: 2 },
{ name: '王五', id: 3 },
{ name: '赵六', id: 4 },
{ name: '钱七', id: 5 },
{ name: '孙八', id: 6 }
]
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
]
const handleSizeChange = (val) => {
console.log(`每页 ${val} 条`)
pages.value.pageSize4 = val
pages.value.currentPage4 = 1 // 重置到第一页
updateShowDate()
}
const handleCurrentChange = (val) => {
console.log(`当前页: ${val}`)
pages.value.currentPage4 = val
updateShowDate()
}
const updateShowDate = () => {
const start = (pages.value.currentPage4 - 1) * pages.value.pageSize4
const end = start + pages.value.pageSize4
showDate.value = tableData.slice(start, end)
}
</script>
<style scoped>
.carousel-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
效果如下
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
18
0- 0
已为社区贡献4条内容
所有评论(0)