【vue+el-table】表头跨两列合并表头,一个表头对应两列,手动新增行数,删除行数
效果如下,红色圈起来的是一个表头对应两列,最前面表头是加号,每一行是减号,可以动态增加和动态删除先说合并表头,主要用到header-cell-style方法代码只保留了一些相关的,多余的列数据没有贴,<el-tableref="standTable"border:data="standTableList"show-summary
·
效果如下,红色圈起来的是一个表头对应两列,最前面表头是加号,每一行是减号,可以动态增加和动态删除
先说合并表头,主要用到header-cell-style方法
代码只保留了一些相关的,多余的列数据没有贴,
<el-table
ref="standTable"
border
:data="standTableList"
show-summary
row-key="id"
:header-cell-style="handerMethod"
>
<el-table-column align="center" width="40">
<template slot="header">
<span @click="addColunm">
<i class="el-icon-circle-plus-outline"></i>
</span>
</template>
<template slot-scope="scope" width="40">
<span @click="delColunm(scope.row.$index)">
<i class="el-icon-remove-outline"></i>
</span>
</template>
</el-table-column>
<el-table-column type="selection" align="center" :reserve-selection="true" width="45"></el-table-column>
<el-table-column width="60" label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="gradeScopBegin">
<template slot-scope="scope">
<span>1111</span>
</template>
</el-table-column>
<el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="gradeScopEnd">
<template slot-scope="scope">
<span>222</span>
</template>
</el-table-column>
</el-table>
主要看handerMethod这个方法
rowIndex代表当前行号(行索引),columnIndex 代表当前列号(列索引)
比如说表头是第一行,行号是0,表头第一行第一列,行号和列号都是0
rowspan规定单元格可占据的行数
colspan属性规定单元格可横跨的列数
理解这个之后,其实代码也就很好理解了,找到表头这一行要合并的两列,将第一列的colSpan设为2,代表单元格可以占据两列,将第二列隐藏
handerMethod({ row, column, rowIndex, columnIndex }) {
console.log(row, column, rowIndex, columnIndex)
if (rowIndex === 0) {//行索引为0代表表头那一行
if (columnIndex === 10) {//列索引,找到你自己要合并的那一列,这个是动态的,根据实际需求来
this.$nextTick(() => {
if (document.getElementsByClassName(column.id).length !== 0) {
document.getElementsByClassName(column.id)[0].setAttribute('colSpan', 2)
}
})
}
}
if (rowIndex === 0 && columnIndex === 11) {//将相邻的列设为隐藏
return { display: 'none' }
}
return { background: '#b1defd', color: '#606266', fontWeight: '800', textAlign: 'center' }
},
然后是表头的加号和减号,在第一个列里面用两个插槽,header插槽在表头上,默认插槽的内容显示在表格内容区,代码已经在上面贴出来了
下面是两个事件的代码,新增就是往列表里push一条数据,删除就是找到对应的索引,用splice方法,删除一项
addColunm() {
this.standTableList.push({
assetName: null,
assetTypeCodeL: null,
suitableObject: null,
controMode: null,
capitaRation: null,
priceCeiling: null,
agencyName: null,
configurationAmount: '',
remark: '',
frequency: '',
})
},
delColunm(index) {
this.standTableList.splice(index, 1)
},
更多推荐
已为社区贡献35条内容
所有评论(0)