Vue+elementUI 表格 增删改查 纯前端 最终版

<!-- 通讯录页 -->
<template>
  <div class="page-item  page-callrecords">
    <div class="page-content" ref="pageTab">
      <div class="page-tab">
        <el-form :model="selectForm" ref="selectForm"  label-width="80px" class="form">
          <el-form-item label="姓名：" class="form-item">
            <el-input v-model="selectForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
           <el-form-item label="电话：" class="form-item">
            <el-input v-model="selectForm.phone" placeholder="请输入电话1或电话2"></el-input>
          </el-form-item>
          <!-- 
          <el-form-item label="分类" class="form-item">
            <el-select v-model="form.classify" placeholder="选择" class="form-item">
              <el-option label="分类一" value="shanghai"></el-option>
              <el-option label="分类二" value="beijing"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" class="form-btn" @click="onSelect()">搜索</el-button>
          </el-form-item>
          <el-button type="primary" icon="el-icon-plus" class="form-btn" @click="onAddRow()">添加</el-button>
        </el-form>  
        <!-- 表格试视图 v-if="cutLayout"-->
        <el-table
          :data="tableDataList"
          style=" 100%;"
          :max-height="tabHeight"
          border
          :header-cell-style="{ background: '#00abbe', color: '#fff' }"
        >
          <!--
          <el-table-column type="selection" width="40"></el-table-column> -->
          <el-table-column prop="id" label="id" width="50" align="center"></el-table-column>
          <!--
          <el-table-column style="color: #828282" align="center" prop="classify" label="分类"></el-table-column> -->
          <el-table-column align="center" prop="name" label="姓名"></el-table-column>
          <el-table-column align="center" prop="phone1" min-width="170" label="电话1">
            
          </el-table-column>
          <el-table-column align="center" prop="phone2" min-width="170" label="电话2">
             
          </el-table-column>
          <el-table-column align="center" prop="address" width="226" min-width="170" label="地址">
           
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注"></el-table-column>
          <el-table-column align="center" label="操作" width="190">
            <template slot-scope="scope"> <!-- size="small" -->
              <el-button
                size="mini" class="operation-btn" round
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                size="mini" class="operation-btn operation-btn-delete" round
                type="danger"
                @click="handleDelete(scope.$index, scope.row )"
              >删除</el-button>
          </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="5"
          layout="prev, pager, next,  sizes, total, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增 编辑 窗口 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="change-pwd" style="1300px;" > 
      <table>
      <tr>
        <td width="100px;">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>
          <el-form :model="dialogForm" ref="dialogForm">
              <el-form-item label="姓名：" class="form-item">
                <el-input v-model="dialogForm.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="电话1" class="form-item">
                <el-input v-model="dialogForm.phone1" placeholder="请输入电话1"></el-input>
              </el-form-item>
              <el-form-item label="电话2" class="form-item">
                <el-input v-model="dialogForm.phone2" placeholder="请输入电话2"></el-input>
              </el-form-item>
              <el-form-item label="地址" class="form-item">
                <el-input v-model="dialogForm.address" placeholder="请输入地址"></el-input>
              </el-form-item>
              <el-form-item label="备注" class="form-item">
                <el-input v-model="dialogForm.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
          </el-form>
          <div> 
            <el-button @click="dialogCancel()">取消</el-button>
            <el-button
              type="primary"
              v-on:click="dialogSave()"
              :loading="addLoading"
            >保存</el-button>
          </div>
        </td>  
       </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
//import { mapState } from 'vuex'
var _index; //定义一个全局变量，以获取行数据的行号
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      dialogTitle:'',//对话框标题
      dialogVisible: false,//是否显示新增窗口
      dialogForm: [],//对话框中的form 新增和编辑
      pageCurrentNum:'',//当前页码
      addLoading: false,
      selectForm: { //查询条件的form 
        name: '',
        phone: '',
        classify: ''
      },
      tableData: [
        {
          id: '100', classify: '分类一', name: '刘加料', phone1: '1381111111', phone2: '12877777',
          address: '中国', remark: '备注2',  operation: ''
        },
        {
          id: '101', classify: '分类二', name: '王国为', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '102', classify: '分类一', name: '刘辚中', phone1: '1392274422', phone2: '12887777788',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '103', classify: '分类二', name: '刘珍从', phone1: '13922456562', phone2: '12883534888',
          address: '中国', remark: '备注3',  operation: ''
        },
        {
          id: '104', classify: '分类二', name: '李国为', phone1: '1392234222', phone2: '1282348888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '105', classify: '分类一', name: '王五中', phone1: '1392226786722', phone2: '109834588',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '106', classify: '分类二', name: '贺炜洁', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注3',  operation: ''
        }, 
        {
          id: '107', classify: '分类一', name: '刘加料', phone1: '1381111111', phone2: '12877777',
          address: '中国', remark: '备注2',  operation: ''
        },
        {
          id: '108', classify: '分类二', name: '王标准', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '109', classify: '分类一', name: '刘宵厅', phone1: '1392112422', phone2: '1288327788',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '110', classify: '分类二', name: '刘材料', phone1: '139786456562', phone2: '122344888',
          address: '中国', remark: '备注3',  operation: ''
        },
        {
          id: '111', classify: '分类二', name: '李杰杰', phone1: '139223422', phone2: '128234823288',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '112', classify: '分类一', name: '王为要', phone1: '1392222346722', phone2: '102334588',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '113', classify: '分类二', name: '贺炒菜', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注3',  operation: ''
        }, 
        {
          id: '114', classify: '分类一', name: '刘加料', phone1: '1381111111', phone2: '12877777',
          address: '中国', remark: '备注2',  operation: ''
        },
        {
          id: '115', classify: '分类二', name: '王国为', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '116', classify: '分类一', name: '王口水', phone1: '1392274422', phone2: '12887777788',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '117', classify: '分类二', name: '刘中断', phone1: '13922456562', phone2: '12883534888',
          address: '中国', remark: '备注3',  operation: ''
        },
        {
          id: '118', classify: '分类二', name: '张灯具', phone1: '1392234222', phone2: '1282348888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '119', classify: '分类一', name: '张材要', phone1: '1392226786722', phone2: '109834588',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '120', classify: '分类二', name: '王可数', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注3',  operation: ''
        }, 
        {
          id: '121', classify: '分类一', name: '李尖凿', phone1: '1381111111', phone2: '12877777',
          address: '中国', remark: '备注2',  operation: ''
        },
        {
          id: '122', classify: '分类二', name: '王顶替', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '123', classify: '分类一', name: '赵酒店', phone1: '1392112422', phone2: '1288327788',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '124', classify: '分类二', name: '王灯光', phone1: '139786456562', phone2: '122344888',
          address: '中国', remark: '备注3',  operation: ''
        },
        {
          id: '125', classify: '分类二', name: '刘耧杰', phone1: '139223422', phone2: '128234823288',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '126', classify: '分类一', name: '李安', phone1: '1392222346722', phone2: '102334588',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '127', classify: '分类二', name: '王为菜', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注3',  operation: ''
        }   
      ],
      tableDataList: [],
      tableDataSelect: [],
      currentPage4: 1,
      tabHeight: 1080,
      total: 20,
      pagetRowNum: 5,//每页显示的行数
      //cutLayout: false,
    }
  },
  computed: {
    //...mapState(['tableDataAllPage'])
  },
  watch: {},

  beforeCreate() {},
  beforeUpdate() {
    this.tabHeight = this.$refs.pageTab.offsetHeight - 137
  },
  beforeMount() {},
  mounted() {
    let _this = this
    window.onresize = function() {
      if (_this.$refs.pageTab) {
        _this.tabHeight = _this.$refs.pageTab.offsetHeight - 137
      }
    }

    this.ListLoadData();//初始化列表
  },

  methods: {
    handleSizeChange(val) { //每页显示条数 变化事件
      console.log(`每页的行数 ${val} 条`)
      this.pagetRowNum= val;
      this.ListLoadData();//改变每页的行数则 重新计算列表
    },
    handleCurrentChange(val) { //页码 变化事件
      console.log(`当前页: ${val-1}`)
      this.tableDataList = this.tableDataAllPage[val-1].list;
      this.pageCurrentNum=val;//当前页码
    },
    //初始化 列表数据
    ListLoadData(){
       //-------获取 列表数据 -------Sina API--Axios跨域 Get请求--------------------------------
        var dataLength=0;
        dataLength=this.tableData.length;

        console.log( "总行数: "+this.tableData.length + " " +dataLength ); 
        /* 分页算法 */
        this.tableDataAllPage=[];      
        this.total=dataLength;//总行数
        var pageCount=Math.ceil(dataLength/this.pagetRowNum);//页数=总行数/每页的行数
        console.log( "页数: "+pageCount );
        //遍历所有的分组
        var i=0;
        var y=0
        for(var x=1;x<=pageCount;x++){
          var tabData={"list":[]};  
          //console.log("第 "+x+"页---------------------------------------------");
          for(y;y<dataLength;y++){//for(var y in response.data){        
            //console.log("插入数据:  "+ y ); 
            var objList={"id":this.tableData[y].id,"classify":this.tableData[y].classify 
                        ,"name":this.tableData[y].name
                        ,"phone1":this.tableData[y].phone1,"phone2":this.tableData[y].phone2
                        ,"address":this.tableData[y].address,"remark":this.tableData[y].remark
                        ,"operation":this.tableData[y].operation 
                        };
            tabData.list.push(objList);
            //console.log("插入数据: "+response.data[y].userID+" "+response.data[y].userName+" "+response.data[y].userExten+"");
            i++; 
            if(i>=x*this.pagetRowNum){//当数页码 * 每页的行数
              //console.log("当数页码:  "+ i +" " + x*this.pagetRowNum ); 
              y++;//加一
              break;
            }    
          } 
          this.tableDataAllPage.push(tabData);
        }
        this.tableDataList = this.tableDataAllPage[0].list;
      //--------------------------------------------------------------
    },
    //查询
    onSelect() {
      console.log('onSelect 查询 ' + this.selectForm.name +" " + this.selectForm.phone);
      var url = 'http://192.168.1.75:5011/httpCli?action=query'+"&name="+this.selectForm.name+"&phone="+this.selectForm.phone ;
      this.$http.get(url).then((data) => {
        console.log(data)
        //this.tableform = data.body;
      }).catch((err) => {
        console.log(err)
      })
      /*
      this.tableDataSelect=this.tableData;
      var i=0;var len=this.tableData.length;
      for(i;i<len;i++){       
        if(this.selectForm.name!=""){
          if(this.selectForm.name!=this.tableData[i].name){
            console.log('onSelect name去除 ' + i +" " + this.tableData[i].name);
            this.tableData.splice(i, 1);           
            
          }
        }  
        if(this.selectForm.phone!=""){
          if(this.selectForm.phone!=this.tableData[i].phone1){
            this.tableData.splice(i, 1);
            console.log('onSelect phone1去除 ' + i +" " + this.tableData[i].phone1);
          }
        }        
      }*/
    },
    //新增数据
    onAddRow() {
      _index=-1;//-1为新增
      this.dialogTitle='新增';
      this.dialogVisible = true;
      this.dialogForm = {
        name: '',
        phone1: '',
        phone2: '',
        address: '',
        remark: ''
      }
    },
    //编辑数据--------------------------------------------------------
    handleEdit(index, row) {
      console.log("handleEdit index:"+index+"  name:"+row.name);
      this.dialogTitle='编辑';
      this.dialogVisible = true;
      this.dialogForm = Object.assign({}, row);
      _index = index;//用于判断是新增还是编辑
      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //取消按扭
    dialogCancel() {
      this.dialogVisible = false;//对话框 不显示
    },
    //对话框 保存按钮
    dialogSave(){
      if(_index==-1){ 
        this.sumbitAddRow(); //保存 新增
      }else{
        this.sumbitEditRow();//保存 编辑
      }    
    },
    //将新增的数据添加到表格中
    sumbitAddRow() {
      console.log( "name: "+ this.dialogForm.name);
      var new_id=this.tableData[this.tableData.length-1].id;
      new_id=  parseInt(new_id) + 1;//id 自动加 1
      console.log( "new_id "+ new_id);
      this.tableform = this.tableform || []
      this.tableData.push({
        id: new_id,
        name: this.dialogForm.name,
        phone1: this.dialogForm.phone1,
        phone2: this.dialogForm.phone2,
        address: this.dialogForm.address,
        remark: this.dialogForm.remark,
      })
      //storage.set('url', this.url);
      this.ListLoadData();//重新加载 数据
      this.handleCurrentChange(this.tableDataAllPage.length);//页码变化事件 跳到最后一页
      this.dialogVisible = false;//对话框 不显示
    },
    //保存编辑
    sumbitEditRow() {
      console.log("sumbitEditRow _index:"+_index+"  name:"+this.dialogForm.name);
      this.dialogVisible = false;//对话框 不显示
      //更新当前列表的行内容
      var editData_index = _index;//当前页的行号
      this.tableDataList[editData_index].name = this.dialogForm.name;
      this.tableDataList[editData_index].phone1 = this.dialogForm.phone1;
      this.tableDataList[editData_index].phone2 = this.dialogForm.phone2;
      this.tableDataList[editData_index].address = this.dialogForm.address;
      this.tableDataList[editData_index].remark = this.dialogForm.remark;

      //同步更新 原始数据
      var edit_id=this.tableDataList[editData_index].id;
      var i=0;
      for(i;i<this.tableData.length;i++){     
        //console.log("遍历数据:  "+ this.tableData[i].name ); 
        if(this.tableData[i].id==edit_id){
          this.tableData[i].name = this.dialogForm.name;
          this.tableData[i].phone1 = this.dialogForm.phone1;
          this.tableData[i].phone2 = this.dialogForm.phone2;
          this.tableData[i].address = this.dialogForm.address;
          this.tableData[i].remark = this.dialogForm.remark; 
        }       
      }
      //
    },
    //删除数据-------------------------------------------------
    handleDelete(index, row) {
      console.log("handleDelete index:"+index+"  name:"+row.name);
      this.$confirm('确认要删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除
        //第一步 取这个 id 所在的 行号
        var i=0;var del_index=-1;
        for(i;i<this.tableData.length;i++){     
          //console.log("遍历数据:  "+ this.tableData[i].name ); 
          if(this.tableData[i].id==row.id){
            del_index=i;
          }       
        }
        console.log( "删除前 总行数: "+this.tableData.length + " "   ); 
        this.tableData.splice(del_index, 1);
        console.log( "删除后 总行数: "+this.tableData.length + " "   ); 
        this.ListLoadData();//重新加载 数据
        //console.log( "当前页: "+this.pageCurrentNum + " "   ); 
        this.handleCurrentChange(this.pageCurrentNum);//跳转至 当前页
        this.$message({ type: 'success', message: '删除成功!', });
      }).catch((err) => {
        if(err!='cancel'){
          this.$message({ type: 'error', message:  '删除失败! '+ err });
        }
      })
    },
   

    //---------------------------------------------------------------
  }
}
</script>
<style lang="scss">
@import './AddressGridView.scss';
</style>