vue element-ui 实现表格可编辑,删除,和添加

思路:
一.添加一行数据
就是在添加的时候新建一个key值和表行key值一抹一样的对象

let j = {
          "type": "",
          "addport": "",
          "user": "",
          "pwd": "",
          "info": "",
          "isSet": true,
        };

二.编辑一行的数据
就是根据isSet的存在与否来判断这一行是input显示(可编辑状态)还是span显示(不可编辑状态)

 <template slot-scope="scope">
              <span v-if="scope.row.isSet">
                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[item.prop]">
                </el-input>
              </span>
              <span v-else>{{scope.row[item.prop]}}</span>
</template>

三.删除一行
就是拿到这一行的索引值,然后用数组的splice()删除就好

 deleteRow(index, rows) { //删除
        rows.splice(index, 1)
      }

全部代码 ps:这里的代码是需要在vue-cli脚手架上面来运行的啊,相信小伙伴在做这个功能的时候,应该已经会用vue-cli了吧,对了,style后面是用的sass 如果不会sass,又想运行我的代码,建议删掉style.

<template>
 <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="(item,index) in master_user.columns" :label="item.label" :prop="item.prop" :width="item.width">
           <template slot-scope="scope">
             <span v-if="scope.row.isSet">
               <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[item.prop]">
               </el-input>
             </span>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="">
           <template slot-scope="scope">
             <span class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click.stop="saveRow(scope.row,scope.$index)">
               确定
             </span>
             <span class="el-tag el-tag--primary el-tag--mini" style="cursor: pointer;" @click="editRow(scope.row,scope.$index)">
               编辑
             </span>
             <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="deleteRow(scope.$index,master_user.data)">
               删除
             </span>
           </template>
         </el-table-column>
       </el-table>
     </el-col>
     <el-col :span="24">
       <div class="el-table-add-row" style="width: 99.2%;" @click="add()"><span>+ 添加</span></div>
     </el-col>
   </el-row>
   <span>{{master_user.data}}</span>
 </div>
</template>

<script>
 export default {
   name: '',
   data() {
     return {
       master_user: {
         sel: null, //选中行   
         columns: [{
             prop: "type",
             label: "远程类型",
             width: 120
           },
           {
             prop: "addport",
             label: "连接地址",
             width: 150
           },
           {
             prop: "user",
             label: "登录用户",
             width: 120
           },
           {
             prop: "pwd",
             label: "登录密码",
             width: 220
           },
           {
             prop: "info",
             label: "其他信息"
           }
         ],
         data: [],
       },
     }
   },
   methods: {
     add() {
       for (let i of this.master_user.data) {
         if (i.isSet) return this.$message.warning("请先保存当前编辑项");
       }
       let j = {
         "type": "",
         "addport": "",
         "user": "",
         "pwd": "",
         "info": "",
         "isSet": true,
       };
       this.master_user.data.push(j);
       this.master_user.sel = JSON.parse(JSON.stringify(j));
     },
     saveRow(row, index) { //保存
       let data = JSON.parse(JSON.stringify(this.master_user.sel));
       for (let k in data) {
         row[k] = data[k] //将sel里面的value赋值给这一行。ps(for....in..)的妙用,细心的同学发现这里我并没有循环对象row
       }
       row.isSet = false;
     },
     editRow(row) { //编辑
       for (let i of this.master_user.data) {
         if (i.isSet) return this.$message.warning("请先保存当前编辑11项");
       }
       this.master_user.sel = row
       row.isSet = true
     },
     deleteRow(index, rows) { //删除
       rows.splice(index, 1)
     }
   },
   components: {}
 }
</script>

<style lang="scss">
 .el-table-add-row {
   margin-top: 10px;
   width: 100%;
   height: 34px;
   border: 1px dashed #c1c1cd;
   border-radius: 3px;
   cursor: pointer;
   justify-content: center;
   display: flex;
   line-height: 34px;
 }
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容