Element UI table 实现直接编辑、上下移动

长不大的大灰狼

已于 2022-04-06 20:48:17 修改

阅读量1.6k

点赞数

分类专栏：前端知识文章标签：前端 vue elementui

于 2022-04-06 20:43:31 首次发布

本文链接：https://blog.csdn.net/glpghz/article/details/123999337

版权

前端知识专栏收录该内容

30 篇文章 1 订阅

订阅专栏

本文展示了如何使用ElementUI实现表格数据的直接编辑功能，以及行的上下移动操作。通过示例代码详细解释了在Vue.js环境中，如何通过监听用户交互来切换编辑状态、保存和撤销编辑，以及调整表格数据顺序。此外，还提供了错误提示和数据验证的处理方法。

摘要由CSDN通过智能技术生成

Element UI table 直接编辑、上下移动

- - - 一、直接编辑
    - 二、上下移动

一、直接编辑

演示：
在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html >
<body>
    <div id="app">
        <el-row>
            <el-col span="24">
                <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
                                </el-input>
                            </span>
                            <span v-else>{{scope.row[v.field]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"修改"}}
                            </span>
                            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
                                删除
                            </span>
                            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col span="24">
                <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
            </el-col>
        </el-row>

    </div>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        //id生成工具 这个不用看 示例而已 模拟后台返回的id
        var generateId = {
            _count: 1,
            get(){return ((+new Date()) + "_" + (this._count++))}
        };
        //主要内容
        var app = new Vue({
            el: "#app",
            data: {
                master_user: {
                    sel: null,//选中行
                    columns: [
                        { field: "type", title: "远程类型", width: 120 },
                        { field: "addport", title: "连接地址", width: 150 },
                        { field: "user", title: "登录用户", width: 120 },
                        { field: "pwd", title: "登录密码", width: 220 },
                        { field: "info", title: "其他信息" }
                    ],
                    data: [],
                },
            },
            methods: {
                //读取表格数据
                readMasterUser() {
                    //根据实际情况，自己改下啊
                    app.master_user.data.map(i => {
                        i.id = generateId.get();//模拟后台插入成功后有了id
                        i.isSet=false;//给后台返回数据添加`isSet`标识
                        return i;
                    });
                },
                //添加账号
                addMasterUser() {
                    for (let i of app.master_user.data) {
                        if (i.isSet) return app.$message.warning("请先保存当前编辑项");
                    }
                    let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
                    app.master_user.data.push(j);
                    app.master_user.sel = JSON.parse(JSON.stringify(j));
                },
                //修改
                pwdChange(row, index, cg) {
                    //点击修改 判断是否已经保存所有操作
                    for (let i of app.master_user.data) {
                        if (i.isSet && i.id != row.id) {
                            app.$message.warning("请先保存当前编辑项");
                            return false;
                        }
                    }
                    //是否是取消操作
                    if (!cg) {
                        if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
                        return row.isSet = !row.isSet;
                    }
                    //提交数据
                    if (row.isSet) {
                        //项目是模拟请求操作  自己修改下
                        (function () {
                            let data = JSON.parse(JSON.stringify(app.master_user.sel));
                            for (let k in data) row[k] = data[k];
                            app.$message({
                                type: 'success',
                                message: "保存成功!"
                            });
                            //然后这边重新读取表格数据
                            app.readMasterUser();
                            row.isSet = false;
                        })();
                    } else {
                        app.master_user.sel = JSON.parse(JSON.stringify(row));
                        row.isSet = true;
                    }
                }
            }
        });
    </script>
</body>

</html>

二、上下移动

上下移动，实际就是操作数组list的顺序index：

    <template v-slot="scope">
        <el-button  @click="upindex(scope.$index,scope.row)">上移</el-button>
        <el-button  @click="downindex(scope.$index,scope.row)">下移</el-button>
    </template>
 
    upindex(index, row) {
      if (index > 0) {
        let upDate = this.HotTableList[index - 1];
        this.HotTableList.splice(index - 1, 1);
        this.HotTableList.splice(index, 0, upDate);
      } else {
        this.$message.warning("已经是第一条了！");
        return false;
      }
    },
 
    downindex(index, row) {
      if (index + 1 === this.HotTableList.length) {
        this.$message.warning("已经是最后一条了！");
        return false;
      } else {
        let downDate = this.HotTableList[index + 1];
        this.HotTableList.splice(index + 1, 1);
        this.HotTableList.splice(index, 0, downDate);
      }
    },