vue+elementUI实现可编辑动态表格，带效果图
记录⼀些最近做项⽬遇到的⼀些坑，顺便分享出来实现的效果。
1、⽆法输⼊编辑
2、删除输⼊框报错
3、点击编辑，⽆法载⼊数据
4、删除表格内输⼊框时序号错乱，报错，⽆法输⼊…
…
下⾯是动态⽣成表格形式的表单，效果图
<!--修改弹出框-->
<el-dialog
:close-on-click-modal="false"
:visible.sync="dialogTableVisible"
:title="textMap[dialogStatus]"
@dragDialog="handleDrag"
>
<div
></div>
<el-form
ref="dataForm"
:inline="true"
:rules="rules"
:model="query"
class="demo-form-inline"
label-width="120px"
>
<div >
<div >基本信息</div>
<div >
<span>年度 </span>
<el-date-picker v-model="timeYear" value-format="yyyy" type="year" placeholder="选择年度"></el-date-picker>
<span> ；标题 </span>
<el-input size="small" v-model="title  "></el-input>
</div>
<div >
<span>评议内容</span>
<span @click="addTable">新增+</span>
</div>
</div>
</div>
<div class="dialog" v-for="(item,index) in allNum":key="index">
<div class="title">
<span>活动标题  </span>
<el-input size="small" v-model="queryData[index]['itemName']"></el-input>
<span> ；分值（分）  </span>
<el-input size="small" v-model="queryData[index]['score']"></el-input>
<span @click="deleTable(index)">删除</span> </div>
<el-table
:data="tableNum['num'+index]"
size="mini"
row-key="id"
border
highlight-current-row
:header-cell-
>
<el-table-column label="序号" width="50px" prop="id" fixed="left"></el-table-column>
<el-table-column label="细则" width="300">
<template slot-scope="scope">
javascript动态效果<el-input
v-model="queryData[index].w.id-1].detailName"
></el-input>
</template>
</el-table-column>
<el-table-column label="分值" width="300">
<template slot-scope="scope">
<el-input
v-model="queryData[index].w.id-1].score"
></el-input>
</template>
</el-table-column>
<!--操作-->
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="{row}">
<span class="spanBtn" @click="editDelete(row.id,index)">删除</span>
</template>
</el-table-column>
</el-table>
<div class="add-table" @click="addInput(index)">添加</div>
</div>
</el-form>
<div slot="footer"class="dialog-footer">
<el-button size="mini" @click="dialogTableVisible = false">取消</el-button>
<el-button size="mini" v-if="dialogType==0" type="primary" @click="createData">确认</el-button> <el-button size="mini" v-if="dialogType==1" type="primary" @click="editData">确认</el-button> </div>
</el-dialog>
js：
```javascript
data(){
allNum:[1],
tableNum:{
num0:[{ id:1}]
},
timeYear:"",
title:"",
queryData:[
{
{
score:"",
itemName:"",
tbReviewDetails:[
{
score:"",
detailName:""
}
]
}
],
},
methods:{
addTable(){
this.allNum.push(this.allNum.length);
var count =this.queryData.length;
this.$set(this.queryData, count,{
tbReviewDetails:[
{
score:"",
detailName:""
}
],
score:"",
itemName:""
});
this.tableNum["num"+ count]=[
{
id:1
}
];
},
deleTable(index){
this.allNum.splice(index,1);
var len =this.queryData.length;
var count =0;
for(var i in this.tableNum){
count++;
}
delete this.tableNum["num"+ index];
for(var i = index; i < count; i++){
this.tableNum["num"+ i]=this.tableNum["num"+(i +1)];
if(this.tableNum["num"+ i]== undefined){
delete this.tableNum["num"+ i];
}
}
this.queryData.splice(index,1);
},
addInput(index){
var len =this.queryData[index].tbReviewDetails.length;
this.queryData[index].tbReviewDetails.push({
score:"",
detailName:""
});
this.tableNum["num"+ index].push({
id:this.tableNum["num"+ index].length +1
});
},
editDelete(ids, index){
var data =this.tableNum["num"+ index];
var count = data.length;
let j ="";
for(var i =0,len=data.length;i < len; i++){
if(data[i].id == ids){
data.splice(i,1);
j = i;
j = i;
}
}
for(var i = j,leng=this.tableNum["num"+ index].length; i < leng; i++){
this.tableNum["num"+ index][i].id--;
}
this.queryData[index].tbReviewDetails.splice(ids -1,1);
}
}
注意，如果是动态写⼊默认数据，⽐如是编辑，不能直接使⽤赋值⽅式，否则会保错，需要使⽤this.$set( target, key, value )，如果是添加（新增）的话就需要赋予第⼀个值
// 修改的编辑弹窗
handleUpdate(row){
getReview(row.id).then(response =>{
this.dialogStatus ="update";
this.dialogType =1;
this.allNum=[]
this.queryData=[]
this.tableNum={}
this.title=response.data.title
this.timeYear=response.data.timeYear
for(var i=0;i&viewItemDtoList.length;i++){
this.allNum.push(i)
this.$set(this.queryData,viewItemDtoList[i]);
for(var j=0;j&viewItemDtoList[i].tbReviewDetails.length;j++){
this.$set(this.tableNum,'num'+i,[{id:j+1}])
}
}
this.dialogTableVisible =true;
this.$nextTick(()=>{
this.$refs["dataForm"].clearValidate();
});
});
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。