vue+element實現(xiàn)表格新增、編輯、刪除功能

更新時間：2019年05月28日 16:29:07 作者：face light~

這篇文章主要為大家詳細介紹了vue+element實現(xiàn)表格新增、編輯、刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

需要做一個需求：新增一個xml文件時，添加數(shù)量不確定、屬性相同的xml標簽，想了想可以用表格做啊，屬性相同，使用統(tǒng)一的表頭，下面的屬性值只是進行增刪改不就行了，就類似于mysql給表里填數(shù)據(jù)一樣。

可是目前似乎還沒有表格的直接增刪改一行的操作，那要怎么實現(xiàn)呢？于是，通過上網(wǎng)以及自己的思考，終于實現(xiàn)了，代碼、思路以及效果圖如下：

1 html部分：

<el-button type="success" @click="addRow(tableData)">新增</el-button>
<template>
 <el-table
 :data="tableData"
 style="width: 100%"
 max-height="250"
 @cell-dblclick="tableDbEdit">
 <el-table-column
 prop="name"
 label="name"
 width="150">
 </el-table-column>
 <el-table-column
 prop="xpath"
 label="xpath"
 width="120">
 </el-table-column>
 <el-table-column
 prop="desc"
 label="desc"
 width="120">
 </el-table-column>
 <el-table-column
 prop="value"
 label="value"
 width="120">
 </el-table-column>
 <el-table-column
 prop="defVal"
 label="defVal"
 width="300">
 </el-table-column>
 <el-table-column
 fixed="right"
 label="操作"
 width="120">
 <template slot-scope="scope">
 <el-button
 @click.native.prevent="deleteRow(scope.$index, tableData)"
 type="text"
 size="small">
 移除
 </el-button>
 </template>
 </el-table-column>
 </el-table>
</template>

2 樣式部分

<style>
 .el-table .warning-row {
 background: oldlace;
 }
 .el-table .success-row {
 background: #f0f9eb;
 }
 .cell-edit-color{
 color:#2db7f5;
 font-weight: bold;
 }
 .cell-edit-input .el-input, .el-input__inner {
 width:100px;
 }
 .cell-icon{
 cursor:pointer;
 color:#fff;
 }
</style>

3.data定義:

rules: {
 fileName: [
 { required: true, message: '請輸入文件路徑', trigger: 'blur' }
 ],
 policyfileName: [
 { required: true, message: '請輸入文件路徑', trigger: 'blur' }
 ],
 parmna: [
 { required: true, message: '請輸入數(shù)據(jù)字段名稱', trigger: 'blur' }
 ],
 remark: [
 { required: true, message: '請輸入分組類型名稱', trigger: 'blur' }
 ]
 },
 activeName: 'include',
 tabPosition: 'left',
 dialogFormVisible: false,
 formQuery:[],
 serverForm: {
 fileName: '',
 policyfileName: '',//policy下的include
 scmType: '',
 version: '',
 address: ''
 },
 tableData: [{
 name: 'aa',
 xpath: 'bb',
 desc: 'cc',
 value: 'dd',
 defVal: 'ee'
 }, {
 name: 'aa1',
 xpath: 'bb1',
 desc: 'cc1',
 value: 'dd1',
 defVal: 'ee1'
}]

4 具體方法：

deleteRow(index, rows) {//移除一行
 rows.splice(index, 1);//刪掉該行
 },
 addRow(tableData,event){//新增一行
 //之前一直想不到怎么新增一行空數(shù)據(jù)，最后幸虧一位朋友提示：表格新增一行，其實就是源數(shù)據(jù)的新增，從源數(shù)據(jù)入手就可以實現(xiàn)了，于是 恍然大悟??！
 tableData.push({ name: '', xpath: '',desc:'',value:'',defVal:'' })
 },

tableDbEdit(row, column, cell, event) {//編輯單元格數(shù)據(jù)
//當鼠標雙擊單元格里面具體單元格的時候，即可對數(shù)據(jù)進行編輯操作，其實就是添加了一個輸入框，最終將輸入框中的數(shù)據(jù)保存下來就行了。
 event.target.innerHTML = "";
 let cellInput = document.createElement("input");
 cellInput.value = "";
 cellInput.setAttribute("type", "text");
 cellInput.style.width = "60%";
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.value;
 };
}

效果如下

————————分割線———————–

之前實現(xiàn)的都是input框的方式，昨天又做了個優(yōu)化，增加了下拉框的方式，并且新增了提交表單時，能夠將數(shù)據(jù)傳到后端的功能。

首先我們知道，select標簽的格式，比較特殊，沒有input那么直接，每次只需要修改，展示它本身的value屬性的值就OK了，select的標簽格式如下：

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

那么，我的修改之后的編輯方法如下：

tableDbEdit(row, column, cell, event) {
 event.target.innerHTML = "";
 let cellInput = '';
 let name = column.property.trim();//拿到當前的屬性值
 //新建一個option元素
 let option = document.createElement('option')
 let option2 = document.createElement('option')
 if(name==="fildtp"){
 cellInput = document.createElement("select");
 //為option賦值和內容
 option.value="1";
 option.text="字符";
 option2.value="2";
 option2.text="數(shù)字";
 //將option元素直接添加為子元素
 cellInput.appendChild(option);
 cellInput.appendChild(option2);
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 //將單元格的內容填充為所選中元素的內容，而不是值
 event.target.innerHTML = cellInput.selectedOptions[0].text;
 //將所選中元素的值賦給該行的值,每個屬性都執(zhí)行一次賦值，那么在最終提交表單的時候，就能保證當前表的值傳到后端
 row.fildtp=cellInput.value;
 }
 }else if(name==="musttg"){
 cellInput = document.createElement("select");
 option.value="1";
 option.text="是";
 option2.value="0";
 option2.text="否";
 cellInput.appendChild(option);
 cellInput.appendChild(option2);
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.selectedOptions[0].text;
 row.musttg=cellInput.value;
 }
 }else if(name==="looptg"){
 cellInput = document.createElement("select");
 option.value="1";
 option.text="循環(huán)";
 option2.value="0";
 option2.text="非循環(huán)";
 cellInput.appendChild(option);
 cellInput.appendChild(option2);
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.selectedOptions[0].text;
 row.looptg=cellInput.value;
 };
 }else{
 debugger
 cellInput = document.createElement("input");
 cellInput.value = "";
 cellInput.setAttribute("type", "text");
 cellInput.style.width = "75%";
 cell.appendChild(cellInput);
 cellInput.onblur = function() {
 cell.removeChild(cellInput);
 event.target.innerHTML = cellInput.value;
 if(name==="fildcd"){
 row.fildcd=cellInput.value;
 }else if(name==="fildna"){
 row.fildna=cellInput.value;
 }else if(name==="fildln"){
 row.fildln=cellInput.value;
 }else if(name==="fildde"){
 row.fildde=cellInput.value;
 }else if(name==="defult"){
 row.defult=cellInput.value;
 }else if(name==="format"){
 row.format=cellInput.value;
 }else if(name==="enumcd"){
 row.enumcd=cellInput.value;
 }else if(name==="loophd"){
 row.loophd=cellInput.value;
 }else if(name==="remark"){
 row.remark=cellInput.value;
 }
 };
 }
},

這種方式，比較詳細，也比較容易理解，但是總感覺有點不完美，首先新增了一行以后，必須要雙擊某一個單元格參能進行內容的輸入，不夠明顯。從代碼上來說，代碼量也較大；而且使用的是原生的html標簽，因此，我在之后對此進行了一個優(yōu)化，直接使用vue的代碼實現(xiàn)，不僅大大減少了代碼量，還實現(xiàn)了操作的友好性。具體實現(xiàn)可以查看的我的文章：Vue+Element實現(xiàn)表格的編輯、刪除、以及新增行的最優(yōu)方法

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: