vue+element表格添加删除编辑

介绍

之前做的用户列表功能，抽出来了删除，新增，编辑等功能，可直接使用。

效果图

实例

<template>
  <div class='useradd height'>
      <div class='btnDiv'>
            <el-button @click="addAll" icon='el-icon-plus' size='mini' type="primary">新增</el-button>
            <el-button @click="editAll" icon='el-icon-edit' size='mini' type="success">批量编辑</el-button>
            <el-button @click="delectAll" icon='el-icon-edit' size='mini' type='danger'>批量删除</el-button>
      </div>
       <el-table :data="tabledatas" stripe border @selection-change="handleSelectionChange"  :default-sort = "{prop: 'name', order: 'descending'}" size='small' :header-cell-style="{background:'#EFF3F8',color:'#606266'}">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="用户名称" sortable prop="name">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.name"></el-input>
                    </span>
                    <span v-else>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户性别">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.sex"></el-input>
                    </span>
                    <span v-else>{{scope.row.sex}}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号码">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.phone"></el-input>
                    </span>
                    <span v-else>{{scope.row.phone}}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" sortable prop="date">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.date"></el-input>
                    </span>
                    <span v-else>{{scope.row.date}}</span>
                </template>
            </el-table-column>
            <el-table-column label="角色状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" @change=change(scope.$index,scope.row)></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size='mini' type="text" @click="edit(scope.row,scope.$index)">{{scope.row.show?'保存':"编辑"}}</el-button>
                    <el-button size='mini' type="text" @click="delect(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  data() {
      return {
          tabledatas: [
               { name: '小明', sex: '男' ,show:false,status:false,date:'2020-05-30',phone:15000000000},
               { name: '小红', sex: '女' ,show:false,status:true,date:'2020-05-28',phone:18317773787},
                { name: '5', sex: '女' ,show:false,status:true,date:'2020-05-20',phone:18317773782},
          ],
         multipleSelection: [],
      }
    },
    methods: {
       edit(row, index) {
            row.show = row.show ? false : true;
            console.log(index)
            this.tabledatas[index]=row
            //Vue.set(this.tabledatas, index, row)
            // 修改后保存
        },
        editAll() {
            this.tabledatas.map((i, index) => {
                i.show = true
                Vue.set(this.tabledatas, index, i)
            })
        },
        // 单个复制
        cope(val, index) {
          this.tabledatas.splice(index, 0,JSON.parse(JSON.stringify(val)))
        },  
        // 单个删除
        delect(index) {
            this.tabledatas.splice(index, 1)
        },
        //新增
        addAll() {
            this.$router.push({path: '/user/add'});
        },
        //批量删除
        delectAll() {
            for (let i = 0; i < this.tabledatas.length; i++) {
                const element = this.tabledatas[i];
                element.id = i
            }
            if (this.multipleSelection.length == 0) this.$message.error('请先至少选择一项')
            this.multipleSelection.forEach(element => {
                this.tabledatas.forEach((e, i) => {
                    if (element.id == e.id) {
                        this.tabledatas.splice(i, 1)
                    }
                });
            });
        },
        //选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        change:function(index,row){
            console.log(index,row);
        },
        
    }
}
</script>
<style scoped lang="less">
.useradd{
    padding:20px;
    box-sizing: border-box;
    background-color: #fff
}
.btnDiv{
    margin-bottom: 20px;
}
</style>