vue+element+axios tebel表格的增删改查

vue+element+axios tebel表格的增删改查

这是我前面做的东西，现在有时间了，来记录一下！接口被我删除了，可以在list里面自己添加数据！！!

表格的删除我是直接在DOM里面处理的，当然，我们也会把数据发送给数据库接口，然后在页面渲染！
我就直接上代码了，有什么不懂或者不对的地方欢迎各位评论，我看到会及时回复的！！！

<template>
  <div class="hello">
    <el-button-group>
      <el-button type="primary" @click.native="dialogVisible=!dialogVisible" round>新增</el-button>
      <!-- <el-button type="primary" @click.native="changeObj = !changeObj">修改</el-button>
      <el-button type="primary" @click.native="toggle">删除</el-button> -->
    </el-button-group>
    <el-input
      class="input"
      style="float:right"
      prefix-icon="el-icon-search"
      label="keywords"
      placeholder="请输入查找的关键字"
      v-model="keywords"
      clearable
    ></el-input>
    <hr />
    <el-table
      :data="search(keywords).slice((currpage - 1)*pagesize, currpage * pagesize)"
      style="width: 100%"
      :header-cell-style="{background:'#C0C4CC',color:'#606266'}"
      
    >
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="logic" label="编码" width="180"></el-table-column>
      <el-table-column prop="describ" label="描述"></el-table-column>
      <el-table-column prop="example" label="示例"></el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
           type="primary"
           round
          @click.native.prevent="editUser(scope.row,scope.$index)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          round
          @click.native.prevent="deleteRow(scope.$index, list)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
      class="box"
    >
      <el-form label-position="left" :inline="true" :model="editObj" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="editObj.name"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model.number="editObj.logic"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-position="left" ref="form" :model="editObj" label-width="40px">
        <el-form-item label="说明" prop="desc">
          <el-input type="textarea" v-model="editObj.describ"></el-input>
        </el-form-item>
        <el-form-item label="示例" prop="desc">
          <el-input type="textarea" v-model="editObj.example"></el-input>
        </el-form-item>
      </el-form>
      <!-- </el-form> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog title="修改" :visible.sync="changeObj1" width="35%" :before-close="handleClose">
      <el-form label-position="left" :inline="true" :model="editObj" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="editObj1.name"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <!-- 不可修改 :disabled="true"-->
          <el-input :disabled="true" v-model="editObj1.logic"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form" label-position="left" :model="editObj" label-width="40px">
        <el-form-item label="说明" prop="desc">
          <el-input type="textarea" v-model="editObj1.describ"></el-input>
        </el-form-item>
        <el-form-item label="示例" prop="desc">
          <el-input type="textarea" v-model="editObj1.example"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeObj1 = false">取 消</el-button>
        <el-button type="primary" @click="change">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
    ></el-pagination>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      isCollapse: false,
      seen: false, //删除按钮是否显示
      dialogVisible: false, //新增弹框是否显示
      changeObj: false, //修改按钮显示
      changeObj1: false, //修改弹窗显示
      suerIndex: 0, //修改数据的（index）
      currentPage: 1, //数据初始默认跳转页面
      pagesize: 10, //默认每页条数
      currpage: 1, //默认页码
      keywords: "", //搜索
      list: [
        //模拟数据
      ],
      editObj: {
        logic: "",
        name: "",
        describ: "",
        example: ""
      },
      editObj1: {
        logic: "",
        name: "",
        describ: "",
        example: ""
      }
    };
  },
  name: "HelloWorld",
  props: {
    msg: String
  },
  created() {
    this.fuzhi();
  },
  methods: {
    fuzhi() {
      var api = "";
      Axios.get(api)
        .then(response => {
          this.list = response.data.result;
          // console.log(this.list);
          for (var i = 0; i < this.list.length; i++) {
            if (this.list[i].status == 0) {
              this.list.splice(i, 1);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    add() {
      //增加数据
      if (!this.editObj.name) {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return;
      }
      if (!this.editObj.logic) {
        this.$message({
          message: "请输入编码",
          type: "warning"
        });
        return;
      }
      if (/[^\d]/g.test(this.editObj.logic)) {
        this.$message({
          message: "编码只能为数字，请输入正确的编码",
          type: "warning"
        });
        return;
      }
      if (!this.editObj.describ) {
        this.$message({
          message: "请输入说明",
          type: "warning"
        });
        return;
      }
      var car = {
        logic: this.editObj.logic,
        name: this.editObj.name,
        describ: this.editObj.describ,
        example: this.editObj.example
      };
          Axios.post("", {
            describ: this.editObj.describ,
            name: this.editObj.name,
            logic: this.editObj.logic,
            example: this.editObj.example,
            pname: "admin",
            pid: 1
          })
            .then(response => {
              console.log(response);
              this.$options.methods.fuzhi();
              if(response.data.code == 10001){
                this.list.push(car);
              this.$message({
                message: response.data.result,
                type: "success"
              });
              }else{
                this.$message({
                message: response.data.msg,
                type: "warning"
              });
              }
              
            })
            .catch(function(error) {
              console.log(error);
              
            });

          this.editObj = {
            logic: "",
            name: "",
            describ: "",
            example: ""
          };
          this.dialogVisible = !this.dialogVisible;
       
    },
    toggle() {
      //删除按钮是否显示
      this.seen = !this.seen;
    },
    deleteRow(index, rows) {
      //数据删除
      this.$confirm("确认是否要删除？")
        .then(_ => {
          Axios.delete(
            "" 
            {
              data: {
                logic: rows[index + (this.currpage - 1) * this.pagesize].logic
              }
            }
          ).then(res => {
            console.log(res);
            this.$options.methods.fuzhi();
            this.$message({
              message: res.data.result,
              type: "success"
            });
            rows.splice(index + (this.currpage - 1) * this.pagesize, 1);

            //location.reload();
          });
        })
        .catch(_ => {});
    },
    editUser(item, idx) {
      //修改数据的数据显示
      this.changeObj1 = true;
      this.suerIndex = idx + (this.currpage - 1) * this.pagesize;
      this.editObj1 = {
        logic: item.logic,
        name: item.name,
        describ: item.describ,
        example: item.example
      };
    },
    change() {
      //数据修改
      if (!this.editObj1.name) {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return;
      }
      if (!this.editObj1.describ) {
        this.$message({
          message: "请输入说明",
          type: "warning"
        });
        return;
      }
          Axios.put("" , {
            describ: this.editObj1.describ,
            name: this.editObj1.name,
            logic: this.editObj1.logic,
            example: this.editObj1.example,
            pname: "admin",
            pid: 1
          })
            .then(response => {
              console.log(response);
              this.$options.methods.fuzhi();
              if (response.data.code == 10001) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.$set(this.list, this.suerIndex, this.editObj1);
              } else {
                this.$message({
                  message: response.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
          this.changeObj1 = false;
        
    },
    handleClose() {
      //弹框关闭
      this.dialogVisible = false;
      this.changeObj1 = false;
    },
    handleSizeChange(val) {
      //每页条数
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      //跳转页码
      console.log(`当前页: ${val}`);
      this.currpage = val;
    },
    search(keywords) {
      // 第一种方式：
      // var newList = []
      // this.list.forEach(item => {
      //     if (item.name.indexOf(keywords) != -1) {
      //         newList.push(item)
      //     }
      // })
      // return newList;
      // 第二种方式：
      return this.list.filter(item => {
        if (item.name.includes(keywords) | item.describ.includes(keywords)) {
          return item;
        }
      });
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose1(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-menu--horizontal > .el-menu-item {
  float: right;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}

.item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #f4f5f8;
}

.el-menu--horizontal > .el-submenu {
  float: right;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-dialog__header {
  padding: 20px 20px 10px;
  background-color: #c0c4cc;
}

.el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #c0c4cc;
}

.input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 20%;
}
</style>