Vue table表格模板

el-标签总结：https://blog.youkuaiyun.com/Tom__cy/article/details/89680067
el-pagination 封装: https://blog.youkuaiyun.com/Tom__cy/article/details/89926274
axios 封装请求数据：https://blog.youkuaiyun.com/Tom__cy/article/details/89918964

可以直接复制源码上手使用—数据的增删改查！

<template>
  <div>
    <!-- 把整体看作一个table -->
    <el-col class="el-col">
      <!-- 头部区域 -->
      <div class="colhead">
        <el-tag>信息报表</el-tag>
        <!-- <svg-icon icon-class="mark" style="margin-left:10px; "></svg-icon> -->
        <el-input placeholder="搜索图表" style="width:100px;display:inline-block;margin-left:200px;"></el-input>
      </div>

      <el-main>
        <el-input v-model="select_word" placeholder="姓名" style="display:inline-block;width:150px;"></el-input>
        <el-button type="primary" style="margin-left:10px;" @click="baonewAdd">新增</el-button>
        <el-button type="warning" @click="baodeleteAll">批量删除</el-button>
      </el-main>
      <el-table
        border
        ref="multipleTable"
        tooltip-effect="dark"
        @select="select"
        @select-all="select"
        :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100%"></el-table-column>
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.$index,scope.row)"
              icon="el-icon-bottom"
              type="text"
              size="small"
            >查看</el-button>
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
              type="text"
              size="small"
            >编辑</el-button>
            <el-button
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-circle-close"
              type="text"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-container> -->
      <el-footer style="margin-top:20px;">
        <template>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.length"
            ></el-pagination>
          </div>
        </template>
      </el-footer>
    </el-col>

    <!-- ----查看个人信息---- -->
    <el-dialog title="查看个人信息" :visible.sync="bao1look">
      <el-form :model="LookInfo">
        <el-form-item label="姓名">
          <el-input style="display:inline-block;width:33%;" v-model="LookInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="LookInfo.date"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input style="display:inline-block;width:80%;" v-model="LookInfo.address"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改个人信息 -->
    <el-dialog title="修改个人信息" :visible.sync="bao1edit">
      <el-form :model="EditInfo" ref="EditInfo">
        <el-form-item label="姓名">
          <el-input style="display:inline-block;width:33%;" v-model="EditInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="EditInfo.date"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input style="display:inline-block;width:80%;" v-model="EditInfo.address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮确定和取消 -->
      <span slot="footer">
        <el-button type="primary" @click.native="bao1editSure">确定</el-button>
        <el-button @click.native="bao1edit = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 删除确定按钮 -->
    <el-dialog title="是否删除个人信息" :visible.sync="bao1detele">
      <!-- 按钮确定和取消 -->
      <span slot="footer">
        <el-button type="primary" @click.native="bao1DeteleSure">确定</el-button>
        <el-button @click.native="bao1detele = false">取消</el-button>
      </span>
    </el-dialog>

    <!-- ----新增个人信息---- -->
    <el-dialog title="新增个人信息" :visible.sync="bao1newadd">
      <el-form :model="AddInfo" ref="AddInfo">
        <el-form-item label="姓名">
          <el-input style="display:inline-block;width:33%;" v-model="AddInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="AddInfo.date"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input style="display:inline-block;width:80%;" v-model="AddInfo.address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮确定和取消 -->
      <span slot="footer">
        <el-button type="primary" @click.native="bao1AddSure">确定</el-button>
        <el-button @click.native="bao1newadd = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
export default {
  data() {
    return {
      biaoData: [],
      currentPage: 1,
      pagesize: 10,
      bao1look: false,
      bao1edit: false,
      bao1detele: false,
      bao1newadd: false,
      idx: null,
      deleteAll: [],
      del_list: [],
      //   通过姓名查询
      select_word: "",
      //   定义初始个人信息
      LookInfo: {
        name: "",
        date: "",
        address: ""
      },
      EditInfo: {
        name: "",
        date: "",
        address: ""
      },
      AddInfo: {
        name: "",
        date: "",
        address: ""
      }
    };
  },
  mounted() {
    this.getbiaoData();
  },
  methods: {
    //   得到所有的数据---------------
    getbiaoData() {
      this.$fetch("/biao1", {}).then(respone => {
        this.biaoData = respone.data.projects;
      });
    },
    // 分页------------------------
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    // 操作界面 ----------- 查看
    // 当点击查看时，让dialog显示,同时赋值数据
    handleClick(index, row) {
      this.bao1look = true;
      this.LookInfo = {
        name: row.name,
        date: row.date,
        address: row.address
      };
    },
    // 操作界面 ----------- 编辑-----通过改变数据并且驱动视图更新$set方法
    handleEdit(index, row) {
      this.idx = index;
      this.bao1edit = true;
      this.EditInfo = {
        name: row.name,
        date: row.date,
        address: row.address
      };
    },
    // 操作界面 ----------- 编辑 -------确定按钮
    bao1editSure() {
      this.$set(this.data, this.idx, this.EditInfo);
      this.bao1edit = false;
      this.$message.success("修改成功");
    },
    // 操作界面 ----------- 删除 -------
    handleDelete(index, row) {
      this.bao1detele = true;
      this.idx = index;
    },
    // 操作界面 ----------- 删除 -------确定按钮
    bao1DeteleSure() {
      this.data.splice(this.idx, 1);
      this.bao1detele = false;
      this.$message.warning("删除成功");
    },
    // 新增按钮-----
    baonewAdd() {
      this.bao1newadd = true;
    },
    // 新增按钮----- 新增 ----确定按钮
    bao1AddSure() {
      //this.$refs.AddInfo 这个数据上有一个validate方法,这个方法可以判断数据是否存在
      this.$refs.AddInfo.validate(valid => {
        if (valid) {
          // 删除尾部数据，并且在头部添加
          this.data.pop();
          this.data.unshift(this.AddInfo);
          this.bao1newadd = false;
          this.$message.success("新增用户成功");
        }
      });
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件, 将所有的勾选的数据集中到一个数组中
    select(selection, row) {
      this.deleteAll = selection;
    },
    // 批量删除-----all
    baodeleteAll() {
      // console.log(this.deleteAll);
      if (this.deleteAll.length) {
        this.del_list = this.del_list.concat(this.deleteAll);
        this.deleteAll = [];
        this.$message.success("删除成功");
      } else {
        this.$message.warning("请选择删除目标");
      }
    }
  },
  computed: {
    data() {
      return this.biaoData.filter(item => {
        // return item;
        let is_del = false;
        for (let i = 0; i < this.del_list.length; i++) {
          if (item.name === this.del_list[i].name) {
            is_del = true;
            break;
          }
        }
        if (!is_del) {
          if (
            item.name.indexOf(this.select_word) > -1 ||
            item.address.indexOf(this.select_word) > -1
          ) {
            return item;
          }
        }
      });
    }
  }
};
</script>


<style scoped>
  .colhead {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
</style>

请求数据的封装：API.js

import axios from 'axios';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='https://www.easy-mock.com/mock/5cbd90c278a48d0396a92f28/yunwei_test';

//http request 拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

 /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

 /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

main.js中调用

import {
  post,
  fetch,
  patch,
  put
} from './api/api'
//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$fetch = fetch;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;