< template > 
 < el-main > 
<h1></h1>
<ul>
  <li v-for="news in tableData"><router-link :to=""/schoolnotice/"+news.newsID">{{news.title}}</router-link><span>{{news.publishTime}}</span></li>
</ul>
        ****
<el-pagination
  layout="prev, pager, next"
  :total="total"
  :page-size="10"
  @current-change="handleCurrentChange"
>
</el-pagination> < / el-main > 
 < / template > 
 < script > 
 export default {
 data () {
return {
  newsList:[],
  total:{},
  tableData: [], //
  allData: [], //
}},
                             ****mounted () {
const that = this;
console.log(that);
this.$http.get(
  that.$interface+"getArticlePages?categoryId=2"
)
  .then(function (response) {
    if(response.data.status === 1){
      response.data.data.list.forEach(function(item){
        that.allData.push({
          title:item.title,
          publishTime:item.publishdate,
          newsID:item.articleid,
        });
        that.total = response.data.data.total;
                    **allDatatableData** 
        that.tableData = that.allData.slice(0, 10);
        console.log(that.total);
      });
    }else{
      that.$message({
        message: response.data.msg,
        type: "warning"
      });
    }
  })
  .catch(function (err) {
    console.log(err);
    that.$message({
      message: " error",
      type: "warning"
    })
  });},  Page number Click event  
 methods: {
handleCurrentChange(val) {  //
  console.log(val);
  this.tableData = this.allData.slice((val - 1) * 10, 10 * val);
}} 
 

 
 
