vue element-ui 實現(xiàn)表格可編輯,刪除,和添加

思路:
一.添加一行數(shù)據(jù)
就是在添加的時候新建一個key值和表行key值一抹一樣的對象

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

二.編輯一行的數(shù)據(jù)
就是根據(jù)isSet的存在與否來判斷這一行是input顯示(可編輯狀態(tài))還是span顯示(不可編輯狀態(tài))

 <template slot-scope="scope">
              <span v-if="scope.row.isSet">
                <el-input size="mini" placeholder="請輸入內(nèi)容" v-model="master_user.sel[item.prop]">
                </el-input>
              </span>
              <span v-else>{{scope.row[item.prop]}}</span>
</template>

三.刪除一行
就是拿到這一行的索引值,然后用數(shù)組的splice()刪除就好

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

全部代碼 ps:這里的代碼是需要在vue-cli腳手架上面來運行的啊,相信小伙伴在做這個功能的時候,應(yīng)該已經(jīng)會用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="請輸入內(nèi)容" 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: "遠(yuǎn)程類型",
             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("請先保存當(dāng)前編輯項");
       }
       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..)的妙用,細(xì)心的同學(xué)發(fā)現(xiàn)這里我并沒有循環(huán)對象row
       }
       row.isSet = false;
     },
     editRow(row) { //編輯
       for (let i of this.master_user.data) {
         if (i.isSet) return this.$message.warning("請先保存當(dāng)前編輯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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容