简单的vue+element-ui纯前端实现基本增删改查功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了简单的vue+element-ui纯前端实现基本增删改查功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

建立一个vue2的项目：

打开控制台，输入命令：vue create xxx(项目名称，记得要小写哈)，并回车，记得选择vue2

简单的vue+element-ui纯前端实现基本增删改查功能

用vscode打开项目，并引入相关的依赖

打开项目终端，输入命令

npm i element-ui -S

npm install less-loader@5.0.0 --save npm install less --save

简单的vue+element-ui纯前端实现基本增删改查功能

点击进入main.js,引入elementui ,加上下面几行代码，并保存

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

懒得再建立组件，所以就全部修改HelloWorld.vue文件中代码为下面那些代码

<template>
<div>
  <div class="app">
  <div class="apper1">
    <el-input  placeholder="请输入日期" type="date" v-model="abj.date"></el-input>
  </div>
   <div class="apper2">
    <el-input placeholder="请输入姓名" v-model="abj.name"></el-input>
  </div>
   <div class="apper3">
    <el-input  placeholder="请输入地址" v-model="abj.address"></el-input>
  </div>
  <el-button type="primary" @click="add()">增加</el-button>
</div>

  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址"
      
     >
      
       
    </el-table-column>
     <el-table-column>
  <!-- eslint-disable-next-line -->
   <template slot-scope="scope" >
        <el-button  type="primary" size="small" @click="del(scope.$index)">删除</el-button>
        <el-button type="danger" size="small"  @click="edit(scope.$index,scope.row)">编辑</el-button>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="日期" :label-width="formLabelWidth">
      <el-input v-model="form.date" autocomplete="off" type="date"></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  
  
  <div slot="footer" class="dialog-footer" >
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dir()">确 定</el-button>
  </div>
  
</el-dialog>
      </template>
      </el-table-column>
  </el-table>

 </div>
</template>

<script>

  export default {

    data() {
      return {
       
       editIndex:"",
        dialogTableVisible: false,
        dialogFormVisible: false,
        abj:{
           date:'',
          name:'',
          address:''
      },
      erity:{
         date:'',
          name:'',
          address:''
      },
       form: {
         date:'',
          name:'',
          address:'',
        
        },
        formLabelWidth: '120px',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          
        }],
       
      }
    },

    methods: {
   
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      
      },
      handleCurrentChange(val) {
        this.currentRow = val;
        
      },
      add(){
      //  var _id=Math.max(...this.tableData.map(function(item){return item.id}))+1;
       
this.tableData.push({
  date:this.abj.date,
  name:this.abj.name,
  address:this.abj.address,
// id:_id
}),
 this.abj={}
  
  

      },
      del(index){
  
       this.tableData.splice(index,1)
       
          // console.log(row.$refs)
      },
      edit(index, row){
           this.dialogFormVisible = true
        this.form={
          date:row.date,
          name:row.name,
          address:row.address,
          
          }
      //     this.form = Object.assign({}, row); //这句是关键！！！
      //  var _index = index;
      //   console.log(index);
      //   console.log(_index);
      //     console.log(this.tableData[index].name)
    //  this.dialogFormVisible = true
    
                this.editIndex = index
      },
    dir(){
      // this.dialogFormVisible = false;
      //  console.log(this.tableData[wor])
      //   this.tableData=[{
      //     date:this.form.date,
      // name:this.form.name,
      //  address:this.form.address
      //   }]
      //  console.log(this.tableData[wor])
        // this.FormVisible = false;
       
      
         this.tableData.splice(this.editIndex,1,this.form)
         console.log(this.tableData[this.editIndex])
         this.dialogFormVisible = false;
    }

    }
    
  }

</script>
<style lang="less" scoped>
.app{
  display: flex;
.apper1{
  width: 170px;
  padding: 0 10px;
}
.apper2{
  width: 170px;
  padding: 0 10px;
}
.apper3{
  width: 170px;
  padding: 0 10px;
}
}

</style>

保存，并在项目终端中输入命令：yarn run serve运行

最后成功以及操作如下

简单的vue+element-ui纯前端实现基本增删改查功能