Element-ui——对表格的增删改查以及分页制作_element ui 实现表格的弹框增删改查

main.js 

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')

http.js（axios）

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
	})
}

 index.js

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

page.js

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)
}

user.js

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

TopBar.vue

<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>

user.vue

<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>