使用vue+element實現表格的新增、編輯（含下拉框）、刪除功能（Vue開發二）
阿新 • • 發佈：2018-11-11
幾天前，需要做一個需求：新增一個xml檔案時，新增數量不確定、屬性相同的xml標籤，想了想可以用表格做啊，屬性相同，使用統一的表頭，下面的屬性值只是進行增刪改不就行了，就類似於mysql給表裡填資料一樣。
可是目前似乎還沒有表格的直接增刪改一行的操作，那要怎麼實現呢？於是，通過上網以及自己的思考，終於實現了，程式碼、思路以及效果圖如下：
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
3.data定義:
rules: { fileName: [ { required: true, message: '請輸入檔案路徑', trigger: 'blur' } ], policyfileName: [ { required: true, message: '請輸入檔案路徑', trigger: 'blur' } ], parmna: [ { required: true, message: '請輸入資料欄位名稱', 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' }]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
4 具體方法：
deleteRow(index, rows) {//移除一行
rows.splice(index, 1);//刪掉該行
},
addRow(tableData,event){//新增一行
//之前一直想不到怎麼新增一行空資料，最後幸虧一位朋友提示：表格新增一行，其實就是源資料的新增，從源資料入手就可以實現了，於是 恍然大悟啊！
tableData.push({ name: '', xpath: '',desc:'',value:'',defVal:'' })
},
tableDbEdit(row, column, cell, event) {//編輯單元格資料
//當滑鼠雙擊單元格里面具體單元格的時候，即可對資料進行編輯操作，其實就是添加了一個輸入框，最終將輸入框中的資料儲存下來就行了。
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;
};
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
效果如下
————————————分割線————————————–
8.25：
之前實現的都是input框的方式，昨天又做了個優化，增加了下拉框的方式，並且新增了提交表單時，能夠將資料傳到後端的功能。
首先我們知道，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>- 1
- 2
- 3
- 4
- 5
- 6
那麼， 我的修改之後的編輯方法如下：
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="數字";
//將option元素直接新增為子元素
cellInput.appendChild(option);
cellInput.appendChild(option2);
cell.appendChild(cellInput);
cellInput.onblur = function() {
cell.removeChild(cellInput);
//將單元格的內容填充為所選中元素的內容，而不是值
event.target.innerHTML = cellInput.selectedOptions[0].text;
//將所選中元素的值賦給該行的值,每個屬性都執行一次賦值，那麼在最終提交表單的時候，就能保證當前表的值傳到後端
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="迴圈";
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.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;
}
};
}
},