vue纯前端增删改查分页

话不多说上代码

<template>
  <div>
      <div style="margin-left:200px;">
        <el-input placeholder="请输入要查询名字" style="width:200px;" v-model="cha" clearable></el-input>
        <el-button type="primary" @click="chaxun" style="margin-left:50px;">查询</el-button>
      </div>
    <div style="margin-left: 100px">
      <el-table :data="currentpagedata" border style="width: 60%">
        <el-table-column align="center" label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="绰号"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="skill" label="绝招" width="200">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="delet(scope.$index,list)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-left: 400px;margin-top:20px;">
        <el-button @click="prevpage()">上一页</el-button>
        <span style="margin:0 20px;">第{{currentpage}}页/共{{totalpage}}页</span>
        <el-button @click="nextpage()">下一页</el-button>
    </div>
    <div style="margin:30px 100px">
      <el-input placeholder="请输入名字" style="width:200px;" v-model="names" clearable> </el-input>
      <el-input placeholder="请输入绰号" style="width:200px;margin:0 20px;" v-model="nicknames" clearable> </el-input>
      <el-input placeholder="请输入绝招" style="width:200px;" v-model="skills" clearable> </el-input>
      <el-button type="success" @click="add" style="margin-left:20px">新增</el-button>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "zsgc",
  data() {
    return {
        cha:'',
        names:'',
        nicknames:'',
        skills:'',
      list: [
        {
          name: "路飞",
          nickname: "草帽",
          skill: "猿王枪",
        },
        {
          name: "索隆",
          nickname: "路痴",
          skill: "狮子歌歌",
        },
        {
          name: "山治",
          nickname: "色河童",
          skill: "恶魔风脚",
        },
        {
          name: "乔巴",
          nickname: "狸猫",
          skill: "蓝波球",
        },
        {
          name: "娜美",
          nickname: "小贼猫",
          skill: "天候棒",
        },
        {
          name: "罗宾",
          nickname: "恶魔之子",
          skill: "千手观音",
        },
        {
          name: "布鲁克",
          nickname: "骷髅男",
          skill: "燕尾斩",
        },
        {
          name: "弗兰奇",
          nickname: "机器人",
          skill: "弗兰奇将军",
        },
        {
          name: "乌索普",
          nickname: "绝境之王",
          skill: "火鸟星",
        },
        {
          name: "萨卡斯基",
          nickname: "赤犬",
          skill: "大喷火",
        },
        {
          name: "波鲁萨利诺",
          nickname: "黄猿",
          skill: "八尺琼勾玉",
        },
        {
          name: "库赞",
          nickname: "青雉",
          skill: "暴雉嘴",
        },
        {
          name: "罗杰",
          nickname: "海贼王",
          skill: "神避",
        },
        {
          name: "艾斯",
          nickname: "火男",
          skill: "火拳",
        },
        {
          name: "萨博",
          nickname: "龙抓手",
          skill: "火焰龙王",
        },
        {
          name: "玲玲",
          nickname: "大妈",
          skill: "威国",
        },
      ],
      totalpage:1, //页数默认第一页
      currentpage:1, //当前页数
      pagesize:5, //每页显示数量
      currentpagedata:[],//当前页显示内容
    };
  },
  created(){
    var localage = window.localStorage
    localage['a']=JSON.stringify(this.list)
    var getlist = JSON.parse(localage.getItem('a'))
    console.log(getlist)
  },
  mounted () {
    //   计算一共有几页
    this.totalpage=Math.ceil(this.list.length / this.pagesize);
    // 计算得0时设置为第一页
    this.totalpage=this.totalpage==0?1:this.totalpage;
    this.setcurrentpagedata()
  },
  methods: {
    // 新增
    add(){
        this.list.unshift({
            name:this.names,
            nickname:this.nicknames,
            skill: this.skills,
        })
        this.names=''
        this.nicknames=''
        this.skills=''
    },
    // 修改
    handleClick(row) {
      console.log(row);
      this.names=row.name
      this.nicknames=row.nickname
      this.skills=row.skill
    },
    // 删除
    delet(index, rows){
        rows.splice(index, 1);
    },
    // 查询
    chaxun(){
        var kan =this.cha || ''
        var temp =[]
        var lists=this.list
        lists.forEach(item => {
            console.log(item)
            if(item.name.indexOf(kan) >= 0){
                temp.push(item)
            }
        })
        this.list=temp
    },
    // 分页
    setcurrentpagedata(){
        // 当前页数
        let begin = (this.currentpage - 1) * this.pagesize
        // 当前页数
        let end = this.currentpage * this.pagesize
        // 当页显示内容
        this.currentpagedata= this.list.slice(begin, end)
        // console.log(this.currentpagedata);
    },
    // 上页
    prevpage(){
        if(this.currentpage == 1)return
        this.currentpage--;
        this.setcurrentpagedata()
    },
    // 下页
    nextpage(){
        if(this.currentpage == this.totalpage)return
        this.currentpage++;
        this.setcurrentpagedata()
    },
    
  },
};
</script>