1.配置国际化 日历的中文 在 app.vue 中
<template>
<a-config-provider :locale="locale">
<div>
<router-view></router-view>
</div>
</a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';//引入antd中文包
import moment from 'moment';//引入moment
moment.locale('zh-cn');//配置moment中文环境
import {ConfigProvider} from "ant-design-vue"
export default {
components:{
"a-config-provider":ConfigProvider
},
data(){
return{
locale:zhCN,//传值给a-config-provider组件
date:""
}
}
}
</script>
2.在表格中--分页
//标签绑定Page
<a-table bordered :data-source="userData" :pagination="Page" rowKey="id"> </a-table>
setup() {
//分页
const Page=reactive({
current: 1,
pageSize: 10,
pageSizeOptions: ref<string[]>(["10", "20", "30", "40", "50"]),
showTotal: (total) => {
return ' 共' + total + '条'
},
onChange:(page,pageSize)=>{
Page.current=page;
Page.pageSize=pageSize;
searchBtn();
// getUserData({page,pageSize})
},
onShowSizeChange:(current,size)=>{
Page.pageSize=size;
Page.current=1;
console.log(Page,"9999",size,current)
// searchBtn();
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
})
)
