vue element-ui 實現表格可編輯,刪除,和新增
阿新 • • 發佈:2021-12-02
思路:
一.新增一行資料
就是在新增的時候新建一個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