Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NDataTable与NSelect相互冲突 #5332

Closed
tgy3300 opened this issue Oct 20, 2023 · 2 comments
Closed

NDataTable与NSelect相互冲突 #5332

tgy3300 opened this issue Oct 20, 2023 · 2 comments
Labels
untriaged need to sort

Comments

@tgy3300
Copy link

tgy3300 commented Oct 20, 2023

TuSimple/naive-ui version (版本)

2.35.0

Vue version (Vue 版本)

3.3.4

---------page.tsx,这是问题代码--------

import { NButton, NDataTable, NPopover, NSelect } from 'naive-ui'
import { TableBaseColumn } from 'naive-ui/es/data-table/src/interface'
import { SelectMixedOption } from 'naive-ui/es/select/src/interface'
import { computed, defineComponent, h, ref } from 'vue'

const TitleComp = defineComponent({
	props: {
		title: {
			type: String,
			default: '',
		},
	},
	setup(props) {
		return () => (
			<NPopover
				overlap={false}
				trigger="click"
				v-slots={{
					trigger: () => <NButton text>{props.title}</NButton>,
					default: () => (
						<div>
							<pre>123sadf6asf46as5f</pre>
						</div>
					),
				}}
			/>
		)
	},
})

export default defineComponent({
	setup() {
		const columnData = (): TableBaseColumn[] => {
			return [
				{
					title: () => h(TitleComp, { title: '标题' }),
					key: 'title',
				},
				{
					title: () => h(TitleComp, { title: '标识' }),
					key: 'code',
				},
			]
		}

		const columns: TableBaseColumn[] = [...columnData()]

		const data: { [key: string]: any }[] = [
			{
				id: '1',
				title: '标题1',
				code: 'name1',
			},
			{
				id: '2',
				title: '标题2',
				code: 'name2',
			},
			{
				id: '3',
				title: '标题3',
				code: 'name3',
			},
		]

		const selectKey = ref('')
		const keyData = computed(() => {
			const selectData = columnData()
			let res: SelectMixedOption[] = []
			if (selectData.length > 0) {
				selectKey.value = selectData[0].key as string
				selectData.map((item) => {
					const rItem: SelectMixedOption = {
						label: item.title as string,
						value: item.key,
					}
					res.push(rItem)
				})
			}
			return res
		})

		return () => (
			<div>
				<NDataTable
					rowKey={() => 'id'}
					columns={columns}
					data={data}
				/>
				<div>
					<NSelect
						size="small"
						style={{ width: '120px' }}
						options={keyData.value}
						v-model:value={selectKey.value}
					/>
				</div>
			</div>
		)
	},
})

NSelect的下拉数据用的是表格的columns源数据,但在选择时,为什么会和TitleComp扯上关系呢,求指点,问题出在哪,下面是问题图片

1697776926818_B5628F96-D91F-4863-AE0C-3AD522E552B4

@github-actions github-actions bot added the untriaged need to sort label Oct 20, 2023
@jahnli
Copy link
Collaborator

jahnli commented Sep 24, 2024

提供的复现 最小可复现的示例

@jahnli
Copy link
Collaborator

jahnli commented Sep 24, 2024

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

@jahnli jahnli closed this as completed Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
untriaged need to sort
Projects
None yet
Development

No branches or pull requests

2 participants