Element-ui——对表格的增删改查以及分页制作

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import Api from './api/index.js'
import './mock'
import { MessageBox, Message } from 'element-ui'
Vue.config.productionTip = false
Vue.prototype.$api = Api
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message
new Vue({
  store,
  router,
  beforeCreate() {
    Vue.prototype.$bus = this
  },
  render: h => h(App)
}).$mount('#app')

import Axios from 'axios'
const axios = Axios.create({
  // baseURL: process.env.NODE_ENV === 'development' ? '' : '',
})
/* resful语法 */
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  console.log(config);
  return config;
});
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  return response;
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
/* url就是接口地址
method = 'get'默认的请求方式
data 放参数的位置 */
export default (url, method = 'get', data = {}) => {
  return axios({
  url,
  method,
  data
  })
}

import http from './http'
export const getList = data => {
  return http('/list', 'get', data)
}
export const getTotal = () => {
  return http('/list/total')
}
export const getListByValue = data => {
  return http('/list/value', 'get', data)
}
export const addList = data => {
  return http('/list/add', 'post', data)
}
export const updateList = data => {
  return http('/list/update', 'put', data)
}
export const deleteList = data => {
  return http('/list/delete', 'delete', data)
}

const context = require.context('./', false, /.js$/)
const modules = {}
context.keys().forEach(fileName => {
  if (!['./index.js', './http.js'].includes(fileName)) {
    Object.assign(modules, context(fileName))
  }
})
export default modules

import http from './http'
export const login = data => {
  return http('/login', 'post', data)
}

<template>
  <div class="top-bar">
    <el-input placeholder="请输入内容，按回车键搜索..." clearable  
  @clear="getListdata" 
  @keydown.enter.native="handleSearch" 
  v-model="inputValue">
      <template slot="append">
       <span class="search" @click="handleSearch">搜索</span>
      </template>
    </el-input>
    <el-button type="primary" @click="$emit('show')">添加商品</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleSearch () {
      this.$emit('handleSearch', this.inputValue)
    },
  getListdata(){
  this.$emit('getdataList')
  }
  }
}
</script>
<style lang="less" scoped>
.top-bar {
  .el-input {
    width: 300px;
  .search {
  cursor: pointer;
  color:#333;
  }
  }
  .el-button {
    margin-left: 15px;
  }
}
</style>

<template>
  <div>
  <top-bar @handleSearch="handlesearch" @getdataList="getdatali"></top-bar>
  <el-table :data="tableData" style="width: 100%" v-loading="loading">
    <el-table-column type="index" label="#" width="50">
    </el-table-column>
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
    <el-table-column prop="likes" label="爱好">
    </el-table-column>
    <el-table-column label="操作" width="200">
    <template v-slot:default="scope">
      <div class="btns">
      <el-button type="primary">
        <i class="el-icon-edit"></i>
      </el-button>
      <el-button type="danger">
        <i class="el-icon-delete"></i>
      </el-button>
      </div>
    </template>
    </el-table-column>
  </el-table>
  </div>
</template>
<script>
  import TopBar from '../components/main/TopBar.vue'
  export default {
  name: 'User',
  components: {
    TopBar
  },
  data() {
    return {
    loading:false,
    total:0,
    page:{
      size: 10,
      current: 1
    },
    tableData: [],
    search: ''
    }
  },
  mounted() {
    this.getList(this.page.current)
  },
  methods: {
    handleEdit(index, row) {
    console.log(index, row);
    },
    handleDelete(index, row) {
    console.log(index, row);
    },
    getList(current){
    this.loading = true
    this.$api.getList({
      current
    }).then(res=>{
      console.log(res);
      this.tableData = res.data
      this.loading = false
    })
    },
    /* 搜索 */
    handlesearch(value){
    if(value == ''){
      this.$message({
      message: '警告哦，这是一条警告消息',
      type: 'warning'
      });
      this.getList()
      return
    }else {
      this.loading = true
      this.$api.getListByValue({
      value
      }).then(res=>{
      this.tableData = res.data.list
      this.total = res.data.total
      this.loading = false
      })
    }
    },
    getdatali(){
    this.getList(this.page.current)
    }
  }
  }
</script>
<style>
</style>

<template>
  <div>
    <top-bar @handleSearch="handlesearch" @getdataList="getdatali"></top-bar>
    <el-table
      :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
      v-loading="loading"
    >
      <el-table-column type="index" label="#" width="50"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="likes" label="爱好"> </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot:default="scope">
          <div class="btns">
            <el-button type="primary" @click="btnDelete(scope.$index, scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              @click="btnDelete(scope.$index, scope.row)"
            >
              <i class="el-icon-delete"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currpage"
      :page-sizes="[2, 5,10]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import TopBar from "../components/main/TopBar.vue";
export default {
  name: "User",
  components: {
    TopBar,
  },
  data() {
    return {
      loading: false,
      total: 0,
      page: {
        size: 10,
        current: 1,
      },
      tableData: [],
      search: "",
      pagesize: 2,
      currpage: 1,
    };
  },
  mounted() {
    this.getList(this.page.current);
  // this.getTotal()
  },
  methods: {
    getList() {
      this.$api.getList().then((res) => {
        this.tableData = res.data;
      });
    },
    btnDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getList(this.page.current);
          this.$api
            .deleteList({
              id: row.id,
            })
            .then((res) => {
              console.log(res);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currpage = val;
      console.log(`当前页: ${val}`);
    },
  // 编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
  // 请求总页面数据
    getList(current) {
      this.loading = true;
      this.$api
        .getList({
          current,
        })
        .then((res) => {
          console.log(res);
          this.total = res.data.length;
          this.tableData = res.data;
          this.loading = false;
        });
    },
    /* 搜索 */
    handlesearch(value) {
  console.log(value);
      if (value == "") {
   this.getList(this.page.current)
      }
       else {
        this.loading = true;
        this.$api
          .getListByValue({
            value,
          })
          .then((res) => {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
          });
      }
    },
    getdatali(value) {
  console.log(value);
      this.getList(this.page.current);
    },
  getTotal(){
  this.$api.getTotal().then(res=>{
    console.log(res);
    this.total = res.data
  })
  }
  },
};
</script>
<style>
</style>