CSS代码：

.page-bar{
		margin:40px auto;
		margin-top: 150px;
		
		}
		ul,li{
		margin: 0px;
		padding: 0px;
		}
		li{
		list-style: none
		}
		.page-bar li:first-child>a {
		margin-left: 0px
		}
		.page-bar a{
		border: 1px solid #ddd;
		text-decoration: none;
		position: relative;
		float: left;
		padding: 6px 12px;
		margin-left: -1px;
		line-height: 1.42857143;
		color: #5D6062;
		cursor: pointer;
		margin-right: 20px;
		}
		.page-bar a:hover{
		background-color: #eee;
		}
		.page-bar a.banclick{
		cursor:not-allowed;
		}
		.page-bar .active a{
		color: #fff;
		cursor: default;
		background-color: #E96463;
		border-color: #E96463;
		}
		.page-bar i{
		font-style:normal;
		color: #d44950;
		margin: 0px 4px;
		font-size: 12px;
		}

vue部分：

data () {
		return {
		all: 10, //总页数
		cur: 1,//当前页码
		totalPage: 0,//当前条数
		}
		},
		methods: {
		//请求数据
		dataListFn: function(index){
		this.$axios.get("http://127.0.0.1:8090/demand/selectListByPage",
		{
		params:{
		page: index,
		limit:'10',
		state: 0
		}
		}).then((res) => {
		if(res.data.message == "success"){
		this.dataList=[];
		for(let i=0;i<res.data.data.length;i++){
		this.dataList.push(res.data.data[i])
		}
		this.all = res.data.totalPage;//总页数
		this.cur = res.data.pageNum;
		this.totalPage = res.data.totalPage;
		}
		
		});
		},
		//分页
		btnClick: function(data){//页码点击事件
		if(data != this.cur){
		this.cur = data
		}
		//根据点击页数请求数据
		this.dataListFn(this.cur.toString());
		},
		pageClick: function(){
		//根据点击页数请求数据
		this.dataListFn(this.cur.toString());
		}
		},
		computed: {
		//分页
		indexs: function(){
		var left = 1;
		var right = this.all;
		var ar = [];
		if(this.all>= 5){
		if(this.cur > 3 && this.cur < this.all-2){
		left = this.cur - 2
		right = this.cur + 2
		}else{
		if(this.cur<=3){
		left = 1
		right = 5
		}else{
		right = this.all
		left = this.all -4
		}
		}
		}
		while (left <= right){
		ar.push(left)
		left ++
		}
		return ar
		}
		}

页面效果：