关于Element UI 里table表格的操作

关于Element UI 里table表格的操作

增删改查，批量删除，批量修改，可以参考参考下面的代码，希望对大家有帮助

<template>
    <div>
        <el-button @click="editAll">批量编辑</el-button>
        <el-button @click="submit">提交</el-button>
        <el-button @click="addAll">批量增加</el-button>
        <el-button @click="deleteAll">批量删除</el-button>
        <el-table :data="tableData" border @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="people">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.people"></el-input>
                    </span>
                    <span v-else>{{scope.row.people}}</span>
                </template>
            </el-table-column>
            <el-table-column label="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">
                    <el-button @click="edit(scope.row,scope.$index)">{{scope.row.show?'保存':"修改"}}</el-button>
                    <el-button @click="cope(scope.row,scope.$index)">单个复制</el-button>
                    <el-button @click="delect(scope.$index)">单个删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import Vue from 'vue'
    export default {
        data() {
            return {
                tableData: [],
                multipleSelection: [],
            },
        created() {
            this.tableData = [
                { people: '女友1', name: '兰兰' },
                { people: '女友2', name: '花花' },
                { people: '女友3', name: '翠翠' },
                { people: '女友4', name: '香香' },
            ]
            this.tableData.map(i => {
                i.show = false
                return i
            })
        },
        methods: {
            edit(row, index) {
                row.show = row.show ? false : true
                Vue.set(this.tableData, index, row)
                // 修改后保存
            },
            editAll() {
                this.tableData.map((i, index) => {
                    i.show = true
                    Vue.set(this.tableData, index, i)
                })
            },
            submit() {
                this.tableData.map((i, index) => {
                    i.show = false
                    Vue.set(this.tableData, index, i)
                })
            },
            // 单个复制
            cope(val, index) {
                this.tableData.splice(index, 0,JSON.parse(JSON.stringify(val)))
            },
            // 单个删除
            delect(index) {
                this.tableData.splice(index, 1)
            },
            //批量新增
            addAll() {
                if (this.multipleSelection.length == 0) {
                    let list = {
                        people: "",
                        name: ""
                    }
                    this.tableData.push(list)
                } else {
                    this.multipleSelection.forEach((val, index)=> {
                    this.tableData.splice(index, 0,JSON.parse(JSON.stringify(val)))
                    });
                }
            },
            //批量删除
            tableData() {
                for (let i = 0; i < this.tableData.length; i++) {
                    const element = this.tableData[i];
                    element.id = i
                }
                if (this.multipleSelection.length == 0) this.$message.error('请先至少选择一项')
                this.multipleSelection.forEach(element => {
                    this.tableData.forEach((e, i) => {
                        if (element.id == e.id) {
                            this.tableData.splice(i, 1)
                        }
                    });
                });
            },
            //选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
    }
</script>