这次使用的是嵌套表格table 看官网代码之后 把官网代码改成js版 页面报错
vue.runtime.esm.js?2b0e:3049 TypeError: customRender is not a function
导致页面中table的操作栏 展示不出来 状态那一栏也展示不了 经排查 意思是customrender要展示的都没展示
代码如下
<template>
<a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
<template #operation>
<a>Publish</a>
</template>
<template #expandedRowRender>
<a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
<template #status>
<span>
<a-badge status="success" />
Finished
</span>
</template>
<template #operation>
<span class="table-operation">
<a>Pause</a>
<a>Stop</a>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item>Action 1</a-menu-item>
<a-menu-item>Action 2</a-menu-item>
</a-menu>
</template>
<a>
More
<down-outlined />
</a>
</a-dropdown>
</span>
</template>
</a-table>
</template>
</a-table>
</template>
<script>
import { DownOutlined } from '@ant-design/icons-vue'
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', slots: { customRender: 'operation' } }
]
const data = []
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00'
})
}
const innerColumns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Status', key: 'state', slots: { customRender: 'status' } },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation1',
key: 'operation1',
slots: { customRender: 'operation1' }
}
]
const innerData = []
for (let i = 0; i < 3; ++i) {
innerData.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56'
})
}
export default {
components: {
DownOutlined
},
data () {
return {
data,
columns,
innerColumns,
innerData
}
}
}
</script>
在网上看到这个关键词 scopedSlots
于是 把js中的slots改成全局 scopedSlots 即可