Vue+Element UI使用本地数据实现对表格的增删改查

Vue+Element UI使用本地数据实现对表格的增删改查

先上效果图

话不多说，代码在下方

<template>
  <div id="app">
    <el-card class="box-card" style="width: 1200px;margin:150px auto;">
   <div style="margin:100px 0 100px 0;position:relative;">
     <el-button @click="addItem()" type="primary" size="small" style="position:absolute;right:100px;top:-50px;">新增</el-button>
      <el-button @click="delAll()" type="primary" size="small" style="position:absolute;right:0;top:-50px;">一键删除</el-button>
    <el-table
    ref="Datalist"
    :data="Datalist"
    border
    stripe
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="200">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="240"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容"
      width="300"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="200"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button @click="updateClick(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   </div>
    </el-card>
   <!-- 新增弹框 -->
   <el-dialog
    title="新增"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form :model="addform" ref="addform" :rules="addRule">
      <el-form-item label="标题" prop="title">
        <el-input v-model="addform.title"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-model="addform.content" type="textarea" :rows="6"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="addform.author"></el-input>
      </el-form-item>
  </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addBtn()">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 编辑弹框 -->
  <el-dialog
    title="修改信息"
    :visible.sync="updatedialogVisible"
    width="30%">
    <el-form :model="detailRow" ref="addform" :rules="addRule">
      <el-form-item label="标题" prop="title">
        <el-input v-model="detailRow.title"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-model="detailRow.content" type="textarea" :rows="6"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="detailRow.author"></el-input>
      </el-form-item>
  </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="updatedialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateBtn()">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>

export default {
  data(){
    return {
      dialogVisible:false,
      updatedialogVisible:false,
      addform:{
        title:'',
        content:'',
        author:'',
      },
      addRule:{
        title: { required: true, message: '标题不可为空', trigger: 'blur' },
        content: { required: true, message: '内容不可为空', trigger: 'blur' },
        author: { required: true, message: '作者不可为空', trigger: 'blur' },
      },
      detailRow:{},
      Datalist:[
        {id:1,title:'今天是个好日子',content:'这里是内容部分',author:'张三'},
        {id:2,title:'圣诞狂欢肺宁颗粒萨满的',content:'这里是内容部分',author:'张三'},
        {id:3,title:'同时打开没发的罚款缴纳',content:'这里是内容部分',author:'张三'},
        {id:4,title:'可视对讲发快递',content:'这里是内容部分',author:'张三'},
        {id:5,title:'借款收到您反馈水电费',content:'这里是内容部分',author:'张三'}
      ],
      ids:[]
    }
  },
  methods:{
    handleSelectionChange(val){
      let ids = []
      val.forEach(item =>{
        ids.push(item.id)
      })
      this.ids = ids
    },
    updateClick(row){
      this.detailRow = row
      this.updatedialogVisible = true
    },
    delClick(row){
      this.Datalist.forEach((item,index) =>{
        if(item.id == row.id){
          this.Datalist.splice(index,1)
        }
      })
      this.$message.success('删除成功')
    },
    delAll(){
      if(this.ids.length == 0) return this.$message.warning('暂未选择要删除的数据')
      for(let i=0;i<this.ids.length;i++){
        this.Datalist.forEach((item,index) =>{
          if(this.ids[i] == item.id){
            this.Datalist.splice(index,1)
          }
        })
      }
      this.$message.success('删除多条数据成功')
    },
    addItem(){
      this.dialogVisible = true
    },
    async addBtn(){
      try{
        await this.$refs.addform.validate()
        this.addform.id = this.Datalist.length+1
        this.Datalist.push(this.addform)
        this.dialogVisible = false
        this.$message.success('新增成功')
        this.addform = {}
      }catch(err){return err}
    },
    async updateBtn(){
      this.Datalist.forEach((item,index) =>{
        if(item.id == this.detailRow.id){
          this.Datalist[index] = this.detailRow
        }
      })
      this.detailRow = {}
      this.updatedialogVisible = false
      this.$message.success('修改成功')
    }
  }
}
</script>

<style lang="scss">
*{
  margin:0;
  padding: 0;
}
#app,html,body {
  width: 100%;
}
 .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
 .el-table__body-wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #eeeeee;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgb(145, 143, 143);
  }

</style>