在项目中,经常需要从后端获取数据后,在动态渲染表格。elementui的表格组件,提供了合并单元格的方法,添加一个属性span-method。
但是在开发过程中发现,span-method只对静态数据有效,就是span-method只会依据表格第一次渲染的数据来渲染,表格数据在请求后端后数据更新了,span-method的规则并不会重新执行
先说一下实现如下效果的方法
合并指标名称相同的相邻行
声明一个函数filterData,用于处理获取到的数据
// dom部分
<el-table :data="tableData" class="table-class" :height="tableH"
:span-method="objectSpanMethod">
......
</el-table>
// js部分
const state = reactive({
spanArr: []// 生成一个与行数相同的数组记录每一行设置的合并数
})
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
if (columnIndex === 0) {
if(state.spanArr[rowIndex]){
return {
rowspan: state.spanArr[rowIndex],
colspan: 1
}
}else{
return {
rowspan: 0,
colspan: 0
}
}
}else {
return {
rowspan: 1,
colspan: 1
}
}
}
const filterData = (data) => {// 合并内容相同的单元格
let contactDot = 0;
let spanArr = [];
data.forEach((item, index) => {
if (index === 0) {
spanArr.push(1)
} else {
//注释:name 是对应体系,data 对应table绑定的数据源
if (item.name === data[index - 1].name) {
spanArr[contactDot] += 1;
spanArr.push(0)
} else {
contactDot = index
spanArr.push(1)
}
}
})
state.spanArr = spanArr;
}
要点在于filterData函数执行的时机
如果在父组件中,获取数据后直接执行filterData函数,然后将tableData和spanArr传给表格子组件,此时的子组件并不会重新更新合并规则,达不到想要的效果。
filterData函数的执行,需要放在子组件的watch中
watch(props, (newVal, oldVal) => {
filterData(props.tableData)// 在监测到tableData有更新后调用filterData
}
, {
deep: true
}
)
这样就能达到合并的目的了