vue+elementui实现数据表格增删改操作纯前端

代码

<template>
  <div class="outer">
    <div style="text-align:left">
      <!-- <el-input v-model="tableDataName" size="small" placeholder="请输入姓名" style="width:240px"></el-input>
      <el-button type="primary" size="small" @click="searchUser">搜索</el-button> -->
      <!-- <el-button type="primary" size="small" @click="openData">展示数据</el-button> -->
      <el-button type="success" size="small" @click="addRow(users)">新增</el-button>
      <!-- <el-button type="success" size="small" @click="handleAdd()">新增</el-button> -->
      <el-button type="primary" size="small" @click="removeUsers()">批量删除</el-button>
    </div>
    <div>
      <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
          <el-table-column type="selection" width="60">
          </el-table-column>
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="name"  label="商品名称" width="120" sortable>
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100" sortable>
          </el-table-column>
          <el-table-column prop="reserve" label="商品库存" min-width="120" sortable>
          </el-table-column>
          <el-table-column prop="data" label="日期" min-width="120" sortable>
          </el-table-column>
          <el-table-column prop="desc" label="商品描述" min-width="180" sortable>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <!-- <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">新增</el-button> -->
              <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, users)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
        <!--新增/编辑界面-->
    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="FormVisible" :close-on-click-modal="false" class="edit-form"
    :before-close="handleClose">
      <el-form :model="Form" label-width="80px" :rules="editFormRules" ref="Form">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="Form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input-number v-model="Form.price"></el-input-number>
          </el-form-item>
          <el-form-item label="商品库存">
            <el-input v-model="Form.reserve"></el-input>
          </el-form-item>
          <el-form-item label="选择日期" :picker-options="pickerOptions">
            <div>
                <el-date-picker v-model="Form.data" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input type="textarea" v-model="Form.desc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="handleCancel('Form')">取消</el-button>
          <el-button v-if="addBtnshow" type="primary" @click.native="confirmAdd('Form')">确定</el-button>
          <el-button v-if="editBtnshow" type="primary" @click.native="confirmEdit('Form')">确定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  var _index;
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        titleMap: {
            addEquipment:'新增',
            editEquipment: "编辑"
        },
                 //新增和编辑弹框标题
        dialogStatus: "",
        Form: {
          id: 0,
          name: '',
          price: 0,
          reserve:'',
          data: '',
          desc: '',
        },
        users:[
        {name:'食品',price:'13',reserve:'13',data:'',desc:'11'},
        {name:'日常用品',price:'13',reserve:'12',data:'',desc:'22'},
        {name:'生鲜',price:'33',reserve:'45',data:'',desc:'33'},
        {name:'果蔬',price:'22',reserve:'34',data:'',desc:'55'},
        {name:'蛋奶',price:'113',reserve:'56',data:'',desc:'99'}
        ],
        editFormRules:{
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' }
          ],
          reserve: [
            { required: true, message: '请输入商品库存', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入商品描述', trigger: 'blur' }
          ],
        },
        FormVisible: false,
        currentRow:[],
        ids:[],
        listLoading:'',
        addBtnshow:false,
        editBtnshow:false,
        editLoading:'',
        dialogStatus: '',
        selected:[],
        editid:'',
        searchForm:[]
      }
    },
    methods: {
      // searchUser(){
      //   console.log(this.searchForm.name)
      //   var username = this.searchForm.name;
      //   let resultdata = this.userlist.filter(users =>{
      //     if(users.name == username|| users.name.indexOf(username) != -1)
      //     {
      //       console.log("已找到！")
      //       return true;
      //     }
      //   });
      //   this.userlist = resultdata;
      // },
      selsChange:function(val){  //点击选中
        console.log(val);
        this.selected = val;
      },
      // 直接新增一行空行
      // handleAdd(val) {
      //   this.dialogStatus = 'create';
      //   this.ViewVisible = true;
//       },
//       addRow(users,event){//新增一行
//  //之前一直想不到怎么新增一行空数据，最后幸亏一位朋友提示：表格新增一行，其实就是源数据的新增，从源数据入手就可以实现了，于是 恍然大悟啊！
//     this.FormVisible = true;
//     users.push({ name: '', price: '',reserve:'',desc:''})
//  },
      // 点击新增
      addRow(users,event) {
        this.FormVisible = true;
        this.Form = {
          id: 0,
          name: '',
          price: 0,
          reserve:'',
          data:'',
          desc: '',
        };
        this.dialogStatus = "addEquipment"
        this.addBtnshow = true
        this.editBtnshow = false
      },
      // 点击确定（新增）
      confirmAdd() {
        // this.users = this.users || []
        this.users.push({
        name: this.Form.name,
        price: this.Form.price,
        reserve: this.Form.reserve,
        data: this.Form.data,
        desc: this.Form.desc
      })
      // storage.set('users', this.users);
      this.FormVisible = false;
      },
      //点击编辑
      handleEdit:function(index, row) {
        this.FormVisible = true;
        this.Form = Object.assign({}, row); //这句是关键！！！
        _index = index;
        console.log(index);
        console.log(_index);

        this.dialogStatus = "editEquipment"
        this.addBtnshow = false
        this.editBtnshow = true
      },
      // 点击确定（编辑）
      confirmEdit(){
        var editdata = _index;
        console.log(editdata);
        this.users[editdata].name=this.Form.name;
        this.users[editdata].price=this.Form.price;
        this.users[editdata].reserve=this.Form.reserve;
        this.users[editdata].data=this.Form.data;
        this.users[editdata].desc=this.Form.desc;
        this.FormVisible = false;
        // 我的 更新的时候就把弹出来的表单中的数据写到要修改的表格中
        // var postdata = {
        //   name: this.Form.name,
        //    price: this.Form.price,
        //    reserve: this.Form.reserve,
        //    data: this.Form.data,
        //    desc: this.Form.desc,
        // }
        //这里再向后台发个post请求重新渲染表格数据
        // this.$set(this.users,'name')
        // let studenteList=this.Form;
        // console.log(studenteList);
        // let {name,price,reserve,data,desc} = studenteList;

            },
      //点击关闭dialog
      handleClose(done) {
        //  done();
        //  location.reload();
        this.FormVisible = false;
      },
      //点击取消
      handleCancel(formName) {
        this.FormVisible = false;
      },
      // 删除
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            // delete:row.splice(index, 1),
            type: 'success',
            message: '删除成功!',
            delete: row.splice(index, 1)   //splice 删除对象是数unfuntion组   如果是对象会出现错误  row.solice not is

            // url: this.$router.push('/')
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      removeUsers() {
          this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
          .then(() => {
          console.log(this.selected);
          var ids = [];
          //提取选中项的id
          $.each(this.selected,(i, users)=> {
          ids.push(users.id);
          });
          // 向请求服务端删除
          //  var resource = this.$resource(this.url);
          resource.remove({ids: ids.join(",") })
          .then((response) => {
          this.$message.success('删除了' + this.selected.length + '个用户!');
          this.getUsers();
          })
          .catch((response) => {
          this.$message.error('删除失败!');
          });
          })
          .catch(() => {
          this.$Message('已取消操作!');
          });
      }
    },
  }
</script>
<style>
  .outer{
    padding: 50px;
  }
</style>
效果图：