element table编辑当前行，使用自定义input操作

最新推荐文章于 2025-05-06 21:45:00 发布

Programmer_ultra

最新推荐文章于 2025-05-06 21:45:00 发布

阅读量919

点赞数

分类专栏： element 前端学习文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/Programmerultra/article/details/126162192

版权

前端学习同时被 2 个专栏收录

3 篇文章

订阅专栏

element

2 篇文章

订阅专栏

先看效果图

点击编辑

上源码！

<el-table-column label="父级工资项字段" prop="salholdPer" width="120" align="center">
                                <template slot-scope="scope">
                                    <el-input
                                        v-if="updateSwitch&&scope.$index===updateIndex"
                                        v-model="updateForm.salholdPer"
                                        :placeholder="scope.row.salholdPer!==null?scope.row.salholdPer:'请输入'"
                                    ></el-input>
                                    <span v-else>{{scope.row.salholdPer}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否底级工资项" prop="salholdIsLeaf" width="120" align="center">
                                <template slot-scope="scope">
                                    <el-select
                                        v-if="updateSwitch&&scope.$index===updateIndex"
                                        v-model="updateForm.salholdIsLeaf"
                                        :placeholder="scope.row.salholdIsLeaf!==null?scope.row.salholdIsLeaf:'请选择'"
                                    >
                                        <el-option label="是" value="1"></el-option>
                                        <el-option label="否" value="0"></el-option>
                                    </el-select>
                                    <span v-else>{{scope.row.salholdIsLeaf==="1"?"是":"否"}}</span>
                                </template>
                            </el-table-column>

按钮部分

<template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        icon="el-icon-lx-edit"
                                        @click="rowUpdate(scope.$index, scope.row)"
                                        v-show="!updateSwitch"
                                    >编辑</el-button>
                                    <el-button
                                        type="text"
                                        icon="el-icon-lx-edit"
                                        @click="submitRowUpdate()"
                                        v-show="updateSwitch&&scope.$index===updateIndex"
                                    >确定</el-button>
                                    <el-button
                                        type="text"
                                        icon="el-icon-lx-edit"
                                        @click="stopRowUpdate()"
                                        v-show="updateSwitch&&scope.$index===updateIndex"
                                    >取消</el-button>
                                    <el-button
                                        v-if="scope.row.isDeleted==='0'"
                                        size="small"
                                        type="text"
                                        icon="el-icon-close"
                                        @click="rowDisable(scope.$index, scope.row)"
                                        style="color:#909090"
                                    >停用</el-button>
                                    <el-button v-else size="small" type="text" icon="el-icon-check" @click="rowDisable(scope.$index, scope.row)">启用</el-button>
                                </template>

点击按钮穿参就不用多说了吧。

需要对当前操作行index进行判断（不然你知道修改的是哪行数据嘛），并且添加一个是否正在编辑的控制字段updateSwitch。

点击编辑按钮会获取编辑行index，改变控制字段的状态。更改完确认提交，完事！

菜鸡学习笔记，有不足或者表述不清楚的地方，欢迎大佬指点评论。