项目有vite搭建,主要技术是vue3+typeScriopt,ui库使用的是ant Design,今天在实现表格合并单元格时遇到一个问题,合并后操作栏显示是空的。
现象:
<a-table :columns="columns" :data-source="tableData" :row-key="(record, index) => index" :pagination="false" bordered>
<template #scenarioHandle="{ record }">
<a-button type="link" @click="handleRehearse(record)">演练</a-button>
</template>
<template #handle="{ record }">
<a-button type="link" @click.stop="handleCheck(record)">详情</a-button>
<a-button type="link" @click.stop="handleEdit(record)">编辑</a-button>
</template>
</a-table>
columns = [
{
title: '文档名称',
dataIndex: 'title',
key: 'title',
customRender: ({ text, record, index }) => {
const obj = {
children: text,
props: {} as any,
};
obj.props.rowSpan = record.rowSpan
return obj;
},
},
{
title: '所属系统',
dataIndex: 'systemSn',
key: 'systemSn'
},
......
{
title: '场景操作',
dataIndex: 'scenarioHandle',
key: 'scenarioHandle',
slots: { customRender: 'scenarioHandle' },
},
{
title: '文档操作',
dataIndex: 'handle',
key: 'handle',
slots: { customRender: 'handle' },
customRender: ({ text, record, index }) => {
const obj = {
children: text,
props: {} as any,
};
obj.props.rowSpan = record.rowSpan
return obj;
},
},
];
table = [
{
title: 'test1',
systemSn: '所属平台',
application: '所属应用',
url: 'http://www.baidu.com',
fileList: [],
rowSpan: 2,
scenarioNmme: '场景名称1',
eventTime: '2022-7-20',
startTime: '2022-7-20',
handler: '开发者'
},
{
title: 'test1',
systemSn: '所属平台',
application: '所属应用',
url: 'http://www.baidu.com',
fileList: [],
rowSpan: 0,
scenarioNmme: '场景名称1',
eventTime: '2022-7-20',
startTime: '2022-7-20',
handler: '开发者'
},
{
title: 'test2',
systemSn: '所属平台',
application: '所属应用',
url: 'http://www.baidu.com',
fileList: [],
rowSpan: 1,
scenarioNmme: '场景名称1',
eventTime: '2022-7-20',
startTime: '2022-7-20',
handler: '开发者'
},
];
我想第一列和最后一列进行合并,但是最后一栏是操作栏,实际数据中是没有这一栏的数据的,想通过slot插槽的方法条件两列操作栏,但是合并过程中用到了customRender,最后一栏的customRender方法中的text是undefined,而customRender又会将slot插槽中的内容覆盖掉,所以表格最后一栏会显示为空,没有达到想要的效果,这时候看到可以使用vue的h函数。于是做了以下修改
修改后:
1.因为我最后一栏操作栏有多个操作按钮,所以见这些按钮封装成一个组件,方便h函数创建虚拟节点
columns = [
{
title: '文档名称',
dataIndex: 'title',
key: 'title',
customRender: ({ text, record, index }) => {
const obj = {
children: text,
props: {} as any,
};
obj.props.rowSpan = record.rowSpan
return obj;
},
},
{
title: '所属系统',
dataIndex: 'systemSn',
key: 'systemSn'
},
......
{
title: '场景操作',
dataIndex: 'scenarioHandle',
key: 'scenarioHandle',
slots: { customRender: 'scenarioHandle' },
},
{
title: '文档操作',
dataIndex: 'handle',
key: 'handle',
customRender: ({ text, record, index }) => {
const obj = {
children: h(HandleButtons, {
props: record,
onHandleEdit: () => {
//编辑
},
onHandleCheck: () => {
//查看详情
}
}),
props: {} as any,
};
obj.props.rowSpan = record.rowSpan
return obj;
},
},
];
2.子组件
<template>
<div>
<a-button type="link" @click.stop="$emit('handleCheck')">详情</a-button>
<a-button type="link" @click.stop="$emit('handleEdit')">编辑</a-button>
</div>
</template>
3.父组件中就不需要使用slot插槽了
<a-table :columns="columns" :data-source="tableData" :row-key="(record, index) => index" :pagination="false" bordered>
<template #scenarioHandle="{ record }">
<a-button type="link" @click="handleRehearse(record)">演练</a-button>
</template>
<!-- <template #handle="{ record }">
<a-button type="link" @click.stop="handleCheck(record)">详情</a-button>
<a-button type="link" @click.stop="handleEdit(record)">编辑</a-button>
</template> -->
</a-table>
效果:
子组件通过$emit传值,然后在父组件中调用事件,但是此时还有一个问题,onHandleEdit和onHandleCheck访问不到父组件组件的方法,在这两个方法里打印this只能得到data中的数据,不过我这里目前是够用了,后面看看还有方法完善。
仅供参考,如有错误,还请指正!!!