iview实现表格行编辑

偏执的太偏执、 2022-10-04 13:55 493阅读 0赞

**一、效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70_pic_center]  
**二、实现思路**

1.写两个按钮，编辑和保存，用一个状态isEdit判断显示和隐藏

<Button v-if="row.isEdit" type="success" @click="edit(row)">编辑</Button>
    <Button v-else type="primary" @click="save(row)">保存</Button>

2.使用render函数渲染两个组件，input和div，根据isEdit判断显示与隐藏

{
       title: '1月',
          key: 'month01',
          render: (h, params) => {
            if(params.row.isEdit){
              return h('div', params.row.month01); 
            }else{
              return h('Input',{
                props:{
                  value: params.row.month01
                },
                on:{
                  'input':(val)=>{
                    params.row.month01 = val;
                }
             }
           }); 
         }
       }
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/f26ff129661a44c590998aeed204e811.png

发表评论取消回复

表情：

评论列表（有 0 条评论，493人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview实现动态编辑标签！

章开始前，说几句废话。其实这个很简单，在iview的文档中呢，提供了标签的动态使用 ——>[点这里看iview标签][iview]，但它是不可编辑的，所以我写个文章记...

绝地灬酷狼/ 2024年04月18日 16:30/ 0 赞/ 59 阅读

相关 iview实现表格可编辑

iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。一、效果图如下： ![在这里插入图片描述][watermark_type_

太过爱你忘了你带给我的痛/ 2022年12月06日 01:27/ 0 赞/ 772 阅读

相关 View UI （iview）表格合并单元格（行/列合并）

> 有时我们在开发过程中会遇到表格里有合并单元格的需求。 > 今天以View UI （iview）组件库为例。 1. 打开[iview官网-table][iview_-t

约定不等于承诺〃/ 2022年10月14日 11:56/ 0 赞/ 468 阅读

相关 html表格无法编辑,html 可编辑表格

场景：HTML+JS兑现可编辑表格 HTML+JS实现可编辑表格实现可视化编辑表格操作... HTML文件: 编辑表格数据可编辑的表格 <table>

ゝ一世哀愁。/ 2022年10月09日 13:28/ 0 赞/ 305 阅读

相关 iview实现表格行编辑

一、效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

偏执的太偏执、/ 2022年10月04日 13:55/ 0 赞/ 494 阅读

相关 VUE+Element UI实现简单的表格行内编辑效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!

亦凉/ 2022年04月18日 03:59/ 0 赞/ 508 阅读

相关 iview表格

这个设计的真好，向iview作者致敬 <template> <Table border :columns="columns1" :data="data

缺乏、安全感/ 2022年04月10日 09:23/ 0 赞/ 261 阅读

相关 iview表格内容居中

一般的iview的表格的样式![在这里插入图片描述][20190329092730486.png] 表格内容都是居左显示的，如果表格的内容很多的话，如下： ![

女爷i/ 2022年02月26日 05:38/ 0 赞/ 783 阅读

相关 iview表格Table表头动态化实现

业务逻辑：根据日期，时间筛选跨度固定为3个月，获取数据，表格动态按月份展示，看图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

朴灿烈づ我的快乐病毒、/ 2021年09月17日 03:02/ 0 赞/ 1509 阅读

相关 bootstrap-table 表格行内编辑实现

这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能。先放一张效果图：

朱雀/ 2021年02月01日 16:27/ 0 赞/ 960 阅读