1、yarn add ant-design-vue
2、yarn add babel-plugin-import
3、babel.config.js文件
module.exports = {
presets: ["@vue/app"],
+ plugins: [
+ [
+ "import",
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"} //注意官网这里是style:true,这可能会导致报错。建议使用style:"css"
+ ]
+ ]
};
4、src/main.js
import {Button,Switch} from 'ant-design-vue'
Vue.use(Button).use(Switch)
5、使用
<a-button type="primary">哈哈哈</a-button>
<a-switch defaultChecked />
若不想按需加载antd-vue，想一次性全部引入
以上第3步：
将：{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}
改为：{ libraryName: "Antd", libraryDirectory: "es", style: "css"} //提醒：这里style:"css"可改为style:true且不会报错,这样改后会加载包里的less文件而非css文件。不改也没影响
以上第4步：全部改为
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
然后重启项目即可，请务必重启项目。
antd表格的使用（包括自定义表格列，表格分页，vue中的对象格式与react的不同）
<template>
<a-table
:columns="columns" //2、绑定columns,提醒：columns不仅要自定义，而且之后还需要在data里注册
:dataSource="personList"
bordered
:rowKey="record=>record.pid" //4、表格的每一列必须有一个key值
:pagination="false" //7、不使用表格的分页，分页设置建议单独用分页组件，提高灵活性
>
<div slot="pimg" slot-scope="text,record"> //6、通过slot='pimg'绑定。通过slot-scope="text,record"可以动态获取数据给自定义的标签，但前提是必须在columns里配置了scopedSlots
<img :src="record.pimg"/>
<a-button @click="bigImg(record.pimg)">查看大图</a-button>
</div>
<div slot="operations" slot-scope="text,record">
<a-button @click="personEdit(record.pid)">编辑</a-button>
<a-popconfirm :title='`确定删除人物"${record.pname}"的信息？`' okText="确定" cancelText="取消" @confirm="deletePerson(record.pid)">
<a-button>删除</a-button>
</a-popconfirm>
</div>
</a-table>
<div style="margin-top:20px;textAlign:right"> //单独使用分页组件
<a-pagination
v-model="pagination.page"
:pageSize="pagination.pageSize"
:total="pagination.total"
@change="pageChange"
/>
</div>
</template>
<script>
const columns = [ //1、定义表格Header数据columns
{
title: '姓名',
dataIndex: 'pname', //此处命名有讲究，要与渲染的数组里的属性名一致(如personList里是pname，这里就要用pname，不可用cname,name等)
key:'pname',
},
{
title: '图片',
dataIndex: 'pimg',
key:'pimg',
scopedSlots:{customRender:'pimg'}, //5、这里设置了scopedSlots:{customRender:'pimg'}之后，表格部分即可通过slot='pimg'绑定，然后去自定义标签及样式。并可通过sloct-scope获取动态数据
},
{
title:'操作',
dataIndex:'operations',
key:'operations',
scopedSlots:{customRender:'operations'},
}
];
export default {
name:'Demo',
data(){
return{
personList:[], //人物列表数据
columns, //3、这里必须注册columns
pagination:{ //9、分页配置(这是一个对象格式的数据)
page:1,
pageSize:10,
total:10, //这里total随便设一个大于0的数即可，后续在接口里会重新赋值
}
}
},
created(){
//进入此页面后，获取上次记录的分页，从而获取上次记录的分页的数据
if(sessionStorage.getItem('personPage')){
this.pagination.page=JSON.parse(sessionStorage.getItem('personPage'))
}
this.getPersonList()
}
methods:{
//初始化时获取列表数据
getPersonList(){
let params={
page:this.pagination.page,
pagesize:this.pagination.pageSize
}
this.$axios.get(`${common.base}/admin/getPersonList`,{params}).then(res=>{
if(res.data.code==200){
if(res.data.data.list){
this.personList=res.data.data.list
this.pagination.total=res.data.data.allsize
}
}else if(res.data.code==401){
this.$message.warning("登录超时，请重新登录！")
this.$router.push({name:'Login'})
}
}).catch(err=>{})
},
//翻页时执行此函数
pageChange(page,pageSize){ //10、分页函数
sessionStorage.setItem('personPage',page) //将当前分页存进session，以便在下次再进入此表格时自动回到当前分页
let params={
page:page,
pagesize:pageSize
}
this.$axios.get(`${common.base}/admin/getPersonList`,{params}).then(res=>{
if(res.data.code==200){
if(res.data.data.list){
this.personList=res.data.data.list
}
}
}).catch(err=>{})
},
//删除人物
deletePerson(pid){
this.$axios.post(`${common.base}/delPerson?pid=${pid}`).then(res=>{
if(res.data.code==200){
this.$message.success(`人物 ${pname} 信息删除成功！`)
//判断若列表数据只有一条且当前页不是第一页，则执行page-1，已达到当前分页最后一条数据被删除后，自动跳转至上一分页的效果
if(this.personList.length==1&&this.pagination.page>1){
this.pagination.page-=1
sessionStorage.setItem('personPage',this.pagination.page) //将当前分页存进session，以便在下次再进入此表格时自动回到当前分页
}
this.getPersonList() //删除成功后调用此函数获取人物列表信息
}
}).catch(err=>{})
},
}
}
</script>
vue中对象方式和react的不同：vue中 :pagination="{page:1,pageSize:10,total:0}" react中 pagination={{page:1,pageSize:10,total:0}} 区别：vue中需要v-bind绑定，且包裹方式是""。
解决浏览器缓存导致异步请求后页面不更新的问题
一般在请求静态资源的时候，浏览器检测不是新数据的话，则会从缓存中读取而不会去进行更新，从而导致后台提交数据后前台不更新的问题。
解决方法1：ctrl+shift+delete呼出浏览器缓存选项，清除缓存即可。但这样的操作对用户不友好，不推荐
解决方法2：控制台中Network里选中Disable cache使浏览器不保存缓存，仅适合开发人员用。
解决方法3：在请求接口的时候带上随机数或者时间戳即可(推荐使用)
getContent(content){
this.$axios.get(`${common.base}/getDemoList?t=${Math.random()}`).then(res=>{ //添加随机数 `t=${Math.random()}` 或 时间戳 `t=${new Date().getTime()}`
this.demoList=res.data.list
}).catch(err=>{})
},
router路由在新窗口打开页面
goIndex(){
let goIndex=this.$router.resolve({name:'Index'}) //这里要用resolve方式。 push,go方式无效
window.open(goIndex.href,'_blank')
}
解决vue路由跳转报错
原因：据翻看大佬的解释，vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果没有捕获到错误，控制台始终会出现如图的警告
解决：在pages/router/router.js 即路由页面添加以下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
+ const routerPush = VueRouter.prototype.push
+ VueRouter.prototype.push = function push(location) {
+ return routerPush.call(this, location).catch(error=> error)
+ }
转换时间
transDate(dateNum){
let date=null
if(dateNum){
date=new Date(dateNum)
}else{
date=new Date()
}
let Y=date.getFullYear()
let M=date.getMonth()+1
M=M<10?('0'+M):M
let D=date.getDate()
D=D<10?('0'+D):D
let h=date.getHours()
h=h<10?('0'+h):h
let m=date.getMinutes()
m=m<10?('0'+m):m
let s=date.getSeconds()
s=s<10?('0'+s):s
this.releaseTime=`${Y}-${M}-${D} ${h}:${m}:${s}`
},
antd回到顶部功能的使用，更改监听的元素（组件默认的监听对象是window，这里我们更改成其他元素）
<div class="go_top_content">
<a-back-top :target="getScrollElem" :visibilityHeight="1000"> //定义一个getScrollElem函数用来更改“回到顶部组件”监听的元素
<span class="iconfont icon4fanhuidingbubai"></span>
</a-back-top>
</div>
getScrollElem(){
return document.getElementById('book_info') //监听id为book_info的元素的滚动
},