添加后的图片效果
1.关键:写一个标识数组(例如这个图表中的,以 日期 indexObj 为唯一标识,每个不一样的日期合并行数记录下来)
2.必要:监听表格数据(无深度监听)当表格数据添加行/删除行/复制时,都有表格数据的动态变化,从而计算标识
3.关键:合并行方法 objectSpanMethod({ row, columnIndex })
注意传值是 { ...this.rowObj } 我也不知道为什么传this.rowObj会造成数据乱,这也是一个对象啊???
步骤:
1.根据点击复制按钮行的信息,得到上一工作日Day
2.根据此Day,执行下面方法,得到上一工作日所有数据,此处Json转化,实际 *** 作中没有转换时,插入数据会乱掉。
3.改变标识,进行循环插入
在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容table的数据为datas=[],那么下面是一列的数据,多列可循环或复制
<el-table-column
prop="name"
label="件号"
sortable
show-overflow-tooltip:
true
align="center"
width="180"
>
<template slot-scope="scope">
<template
v-if="scope.row.show"
>
<el-form-item
label=" "
prop="name"
>
<el-input
v-model="ruleForm.name"
disabled="true"
size="mini"
>
<i
slot="suffix"
class="el-input__icon el-icon-search"
@click="Partnum"
/>
</el-input>
</el-form-item>
</template>
<template v-else>
<span @click="partNumber(scope.$index, scope.row)">{{ scope.row.name }}</span>
</template>
</template>
</el-table-column>
这思路主要是template里面还有2个template,在data数组的 *** 作中每条加一个属性show来控制是显示输入框还是里面的某个字段,
addBtn () {// 添加按钮事件
let data = { show: true }
this.datasNew.unshift(data)
},
同思路可自定义添加各种属性给表格做相应 *** 作。
//动态添加行与列function addHtml( )
{
var tab=document.getElementById("viewTabs")//获得表格
var colsNum=tab.rows.item(0).cells.length //表格的列数
var num=document.getElementById("viewTabs").rows.length//表格当前的行数
var rownum=num-1
tab.insertRow(rownum)
for(var i=0i<colsNum-1i++)
{
tab.rows[rownum].insertCell(i)//插入列
tab.rows[rownum].cells[i].innerHTML="dfd"
}
tab.rows[rownum].insertCell(i)
tab.rows[rownum].cells[i].innerHTML="ddddkk"
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)