溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需要做一個需求：新增一個xml文件時，添加數量不確定、屬性相同的xml標簽，想了想可以用表格做啊，屬性相同，使用統一的表頭，下面的屬性值只是進行增刪改不就行了，就類似于mysql給表里填數據一樣。
可是目前似乎還沒有表格的直接增刪改一行的操作，那要怎么實現呢？于是，通過上網以及自己的思考，終于實現了，代碼、思路以及效果圖如下：
1 html部分：
<el-button type="success" @click="addRow(tableData)">新增</el-button> <template> <el-table :data="tableData" 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: '請輸入數據字段名稱', 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){//新增一行
//之前一直想不到怎么新增一行空數據，最后幸虧一位朋友提示：表格新增一行，其實就是源數據的新增，從源數據入手就可以實現了，于是 恍然大悟啊！
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;
};
}
效果如下
————————分割線———————–
之前實現的都是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>
那么， 我的修改之后的編輯方法如下：
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;
}
};
}
},
這種方式，比較詳細，也比較容易理解，但是總感覺有點不完美，首先新增了一行以后，必須要雙擊某一個單元格參能進行內容的輸入，不夠明顯。從代碼上來說，代碼量也較大；而且使用的是原生的html標簽，因此，我在之后對此進行了一個優化，直接使用vue的代碼實現，不僅大大減少了代碼量，還實現了操作的友好性。具體實現可以查看的我的文章：Vue+Element實現表格的編輯、刪除、以及新增行的最優方法
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
