你可以在Vue 3中使用Ant Design Vue实现两个日期框以进行查询。以下是一个简单的示例,演示了如何添加开始和结束日期选择框,并在点击按钮时触发查询。
首先,确保已安装Ant Design Vue库,然后您可以将其应用于您的组件中:
<template>
<div class="HistoricalReminder">
<a-row>
<a-col :span="8">
<a-date-picker v-model:value="startDate" placeholder="开始日期" />
</a-col>
<a-col :span="8">
<a-date-picker v-model:value="endDate" placeholder="结束日期" />
</a-col>
<a-col :span="8">
<a-button type="primary" @click="fetchData">查询</a-button>
</a-col>
</a-row>
<a-table
:columns="columns"
:data-source="data"
:scroll="{ x: 'max-content' }"
:pagination="{
pageSize: pageSize,
showSizeChanger: true,
pageSizeOptions: ['5', '10', '20'],
onShowSizeChange: handlePageSizeChange,
showQuickJumper: true,
showTotal: (total, range) => `显示 ${range[0]}~${range[1]}条记录,共 ${total} 条记录`
}"
:rowClassName="(record, index) => (index % 2 === 0 ? 'red-row' : '')"
></a-table>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { CollectionRecord } from '../../utils'; // 确保路径正确
const columns = [
{
title: '借据号',
dataIndex: 'loanInfoCode',
key: 'loanInfoCode',
width: 100,
},
{
title: '合同编号',
dataIndex: 'contractCode',
key: 'contractCode',
width: 150,
},
{
title: '客户姓名',
dataIndex: 'customerName',
key: 'customerName',
width: 150,
},
];
const data = ref([]);
const pageSize = ref(5);
const startDate = ref(null);
const endDate = ref(null);
const handlePageSizeChange = (current, size) => {
console.log(`每页条数变化为: ${size}`);
pageSize.value = size;
}
const fetchData = () => {
const params = {
draw: 1,
length: pageSize.value, // 使用当前页面大小
order: [],
searchParams: {
custId: 'A10101', // 如果有其他的搜索条件,可以动态传递
dateStart: startDate.value ? startDate.value.format('YYYY-MM-DD') : '',
dateEnd: endDate.value ? endDate.value.format('YYYY-MM-DD') : ''
},
};
CollectionRecord(params)
.then((response) => {
data.value = response.data;
})
.catch((error) => console.error('请求失败:', error));
}
</script>
<style scoped>
.red-row {
background-color: #ffcccc; /* 自定义颜色 */
}
</style>
各部分说明:
- 日期选择:使用
<a-date-picker>
来选择开始和结束日期,并通过v-model:value
绑定到对应的变量。 - 查询按钮:当用户点击“查询”按钮时,会调用
fetchData
方法。 - 数据获取:在
fetchData
中,构造请求参数,并调用API获取数据并更新表格。
请根据实际情况调整API路径及其他参数。如果需要进一步的自定义功能,如处理时间格式等,请根据需要进行适配。
内容由零声教学AI助手提供,问题来源于学员提问