Closed
Description
版本:
"devDependencies":` {
"@ant-design-vue/nuxt": "^1.1.2",
"@nuxt/devtools": "latest",
"nuxt": "^3.7.4",
"vue": "^3.3.4",
"vue-router": "^4.2.5"
},
nuxt.config.ts文件
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["@ant-design-vue/nuxt"],
});
我就是配置了这些, 然后使用就是在官网上找的例子: 然后在刷新的时候, 样式丢失, 刷新完成之后就变正常了
<template>
<div>
<!-- <NuxtWelcome /> -->
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:tree-data="treeData"
>
<template #title="{ title, key }">
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
<template v-else>{{ title }}</template>
</template>
</a-tree>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import type { TreeProps } from "ant-design-vue";
const treeData: TreeProps["treeData"] = [
{
title: "parent 1",
key: "0-0",
children: [
{
title: "parent 1-0",
key: "0-0-0",
disabled: true,
children: [
{ title: "leaf", key: "0-0-0-0", disableCheckbox: true },
{ title: "leaf", key: "0-0-0-1" },
],
},
{
title: "parent 1-1",
key: "0-0-1",
children: [{ key: "0-0-1-0", title: "sss" }],
},
],
},
];
const expandedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
watch(expandedKeys, () => {
console.log("expandedKeys", expandedKeys);
});
watch(selectedKeys, () => {
console.log("selectedKeys", selectedKeys);
});
watch(checkedKeys, () => {
console.log("checkedKeys", checkedKeys);
});
</script>