VUE + Elementui 表格编辑操作

最新推荐文章于 2023-06-15 19:12:56 发布

井边兰

最新推荐文章于 2023-06-15 19:12:56 发布

阅读量870

点赞数

分类专栏：网页前端文章标签： vue elementui 表格编辑

本文链接：https://blog.csdn.net/weixin_39782854/article/details/86632348

版权

网页前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一种使用Vue和Element UI实现可编辑表格的方法，通过控制单元格编辑器的显示和隐藏，使表格在查看和编辑状态间切换。具体实现包括CSS样式调整、HTML结构设计及JavaScript交互逻辑。

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

原理：（1）通过针对点击的行添加一个css标记，控制该单元格的编辑器进行显示和隐藏，可通过highlight-current-row标记控制

（2）通过编辑获取点击修改的index控制该行单元格的编辑器进行显示和隐藏

代码差不多，下面的是第二种方法如下：

css部分：

/* 可编辑表格 */
.el-tb-edit .el-input,
.el-tb-edit .el-input-number,
.el-tb-edit .el-select,
.el-tb-edit .el-input__inner{ display: none !important;width: 100%;}
.el-tb-edit .current-row .el-input,
.el-tb-edit .current-row .el-input-number,
.el-tb-edit .current-row .el-select,
.el-tb-edit .current-row .el-input__inner{display: inline-flex !important;}
.el-tb-edit .current-row .el-input+span,
.el-tb-edit .current-row .el-input-number+span,
.el-tb-edit .current-row .el-select+span,
.el-tb-edit .current-row .el-input__inner+span{display: none !important;}

html部分：

<el-table class="comtb"
                           v-loading="loading2" element-loading-text="Loading......"
                           element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 1)"
                           ref="singleTable" :data="list" tooltip-effect="dark"
                           :row-class-name="tableRowClassName" empty-text="暂无数据"
                           @row-click="clickrow"
                           style="width: 100%">
                           <el-table-column prop="UnitName" label="名词"></el-table-column>
                           <el-table-column prop="UnitCode" label="代码"></el-table-column>
                           <el-table-column prop="UserName" label="操作用户"></el-table-column>
                           <el-table-column prop="OperateTime" label="操作时间"></el-table-column>
                           <el-table-column width="150px" label="参数值">
                               <template scope="scope">
                                   <el-input v-if="scope.$index ===clickindex" v-model="scope.row.HourCapacity"
                                   @blur="BlurText($event,scope.row.HourCapacity)">
                                   </el-input>
                                   <span v-if="scope.$index !=clickindex">{{scope.row.HourCapacity}}</span>
                               </template>
                           </el-table-column>
                           <el-table-column label="备注">
                               <template scope="scope">
                                   <el-input v-if="scope.$index ===clickindex" v-model="scope.row.Remark"></el-input>
                                   <span v-if="scope.$index !=clickindex">{{scope.row.Remark}}</span>
                               </template>
                           </el-table-column>
                           <el-table-column width="100px" label="操作">
                               <template slot-scope="scope">
                                   <el-button v-if="scope.$index !=clickindex" size="mini" type="primary" icon="el-icon-edit"
                                   v-on:click="setCurrent(scope.$index)">编辑</el-button>
                                   <el-button v-if="scope.$index ===clickindex" size="mini" type="danger" icon="el-icon-success"
                                   v-on:click="saveData(scope.row)">保存</el-button>
                               </template>
                           </el-table-column>
                       </el-table>

JS部分：
var mainvue = new Vue({
       data: function () {
           return {
               loading2:false, clickindex:-1,//选中的行
               }
       },
       created:function () {},
       methods: {
           /*验证输入为正整数*/
           BlurText(e,oldval){
               var isok = new RegExp("^[1-9][0-9]*$").test(e.target.value);
               if(!isok){this.$message.warning("请输入正整数"); e.target.value=oldval;}
           },

tableRowClassName ({row, rowIndex}){row.index = rowIndex;},
           setCurrent(index) {this.clickindex = index;},
           clickrow(row, event, column){if(row.index!=this.clickindex && this.clickindex>=0)this.clickindex=-1;},
       },
       filters:{ }
       }).$mount('#app');