目录
1.slot中使用模板字符串
2.合并表头
坑1：合并表头后一窜一窜的位置
坑2：合并表头后页面位置不够大，表头合并的位置就又窜了
4.整列居左的前提下设置前几行居中
坑1：样式加不上去
5.设置一行中只有某个单元格可以进行编辑
坑1：拿到的columnIndex全是0
7.flex-grid合并后右侧出现了一块空白导致底部出现滚动条
9.JSX注入edit自定义方法添加自定义事件
10.合并后表格在进行编辑的时候，由于本身数据是循环赋值的导致数据变了但是页面不更新
11.表格重新渲染之后，合并的样式如果存在窜行，页面效果会抖动很大
12.手写双击编辑，添加编辑条件，仅限有的表格可以编辑
13.表格编辑后重新渲染，手动合并的表格并不会自动合并，重新操作表格合并
14.合并表格后，添加编辑功能后，表格会在单行合并的位置变高
1.slot中使用模板字符串
正常使用例子是，但是不生效
{
title: '',
headerClassName: 'bg-color-july hidden-cell',
field: 'two',
slots: {
default: (params, h) => [<span>{vm.cellImmobilizationText(params)}</span>]
}}更改后为
{
title: '',
headerClassName: 'bg-color-july hidden-cell',
field: 'one',
showOverflow: false,
slots: {
default: (params, h) => [
h('span', {
props: {
type: 'text'
},
domProps: {
innerHTML: vm.cellImmobilizationText(params)
}
})
]
}}2.合并表头
document.querySelector('.custmer-span').setAttribute('rowspan', '3')
const hiddenCells = document.getElementsByClassName('hidden-cell')
for (let i = 0; i < hiddenCells.length; i++) {
hiddenCells[i].style.display = 'none'
}{
type: '',
params: { name: '' },
fixed: 'left',
title: 'hhhhhhhhh',
width: '110',
headerClassName: 'custmer-span',
children: [{
title: '',
headerClassName: 'hidden-cell',
}]
}
坑1：合并表头后一窜一窜的位置
坑2：合并表头后页面位置不够大，表头合并的位置就又窜了
解决办法：
1.合并那一列的 fixed 属性删了
2.点击列高亮删了
columnConfig: {
isCurrent: false,
},
3.footer-method部分行高
/* 对应 vxe-table 的 size 没有设置的时候 */
.vxe-table--render-default.border--full .vxe-footer--column
{
height: 27px;
}
/* 对应 vxe-table 的 size="medium" 的时候*/
.vxe-table--render-default.size--medium .vxe-footer--column.col--ellipsis{
height: 27px;
}
/* 对应 vxe-table 的 size="small" 的时候*/
.vxe-table--render-default.size--small .vxe-footer--column.col--ellipsis {
height: 27px;
}
/* 对应 vxe-table 的 size="mini" 的时候*/
.vxe-table--render-default.size--mini .vxe-footer--column.col--ellipsis{
height: 27px;
}4.整列居左的前提下设置前几行居中
className: params => vm.rowClassName(params),
rowClassName(params) {
const { rowIndex } = params
if (rowIndex < 9) {
return 'text-align-row-center'
}
},
.vxe-body--column{
line-height: initial;
&.border-top-dashed{
border-top: dashed #d9001b;
}
&.text-align-row-center{
text-align: center;
}
}坑1：样式加不上去
一定要用&，不然不生效
坑2：单独设置行高并不会影响到footer的行高
rowConfig: {
height: 26
},
5.设置一行中只有某个单元格可以进行编辑
menuConfig: {
body: {
options: [
[
{
code: 'edit',
name: '編集',
prefixIcon: 'vxe-icon-edit',
visible: true,
disabled: false
}
]
]
},
visibleMethod: params => {
const { rowIndex, column } = params
if (rowIndex === 8 && ['当前需要编辑的行的字段'].includes(column.field)) {
return true
} else {
return false
}
}
},坑1：拿到的columnIndex全是0
解决办法：根据字段field去区分，不用columnIndex
6.给footer增加右键菜单
7.flex-grid合并后右侧出现了一块空白导致底部出现滚动条
发现是如果合并行为合并到最后一列导致tooltip长度超出单元格长度，如图所示：
把合并的四列改成一样宽就不再有这个问题，猜测tooltip的计算宽度是根据合并的第一个表格来计算的
我这里是将四列改成了统一宽度，或者适当增加第四列，或者直接改c--tooltip最大宽度都可以
8.合并footer突然不生效了
footerClassName里的回调检查返回的class合法吗，注意&
【开发开发着突然不好使了，给我干懵了，代码对比老半天才发现】
9.JSX注入edit自定义方法添加自定义事件
edit: ({ row }) => <vxe-input onBlur={() => this.editRender(row)} v-model={row[index][PERIODS_FIELD[indexPeriod]]}></vxe-input>10.合并后表格在进行编辑的时候，由于本身数据是循环赋值的导致数据变了但是页面不更新
解决办法，手动让他知道更新了数据
editRender(params) {
// this.gridReality++
this.computeData.push([]) // 添加一个空数组到末尾
this.computeData.pop() // 移除最后一个元素
}11.表格重新渲染之后，合并的样式如果存在窜行，页面效果会抖动很大
解决办法：不用overflow去使内容换行，而是className在样式添加换行方法，添加方法同4
&.text-align-row-over{
.vxe-cell{
max-height:100% !important;
width:100% !important;
height: 100%;
overflow: auto;
text-overflow: clip;
white-space: normal;
}
}12.手写双击编辑，添加编辑条件，仅限有的表格可以编辑
更改编辑项config，并且在column中仅对可操作列进行编辑项的添加
editRender: {
name: 'input',
attrs: { type: 'number' }
}, editConfig: {
trigger: 'dblclick',
mode: 'cell',
beforeEditMethod({ rowIndex, column }) {
// const { khTwo } = $table.params
if ((rowIndex === 8 || rowIndex === 10)) {
return true
} else {
return false
}
}
},13.表格编辑后重新渲染，手动合并的表格并不会自动合并，重新操作表格合并
this.$refs.gridCompute.setMergeCells(this.gridPropsCompute.margeCell)14.合并表格后，添加编辑功能后，表格会在单行合并的位置变高
解决办法，硬改
.vxe-table--render-default.size--mini .vxe-body--column:not(.col--ellipsis) {
padding: 0px 0px;
}
.vxe-table--render-default.vxe-editable.size--mini .vxe-body--column{
height: 26px;
}
