1、第一种通过js去掉
<template><div><div style="margin-top:10px;width: 100%;"><dade-descriptions><tr><dade-descriptions-item label="代理名称"><dade-input placeholder="代理名称"></dade-input></dade-descriptions-item><dade-descriptions-item label="代理级别"><n-select class="dade-select" :options="options" /></dade-descriptions-item><dade-descriptions-item label="手机号"><n-input type="text" placeholder="基本的 Input" /></dade-descriptions-item><dade-descriptions-item label="状态"><div style="padding: 4px 8px;">22</div></dade-descriptions-item></tr><tr><dade-descriptions-item label="开始时间">22</dade-descriptions-item><dade-descriptions-item label="结束时间" colspan="5">33</dade-descriptions-item></tr><tr><dade-descriptions-item label="大得001" colspan="7"><n-input type="text" placeholder="基本的 Input" /></dade-descriptions-item></tr></dade-descriptions></div></div>
</template><script setup>import { ref,onMounted } from 'vue';// 初始化好后执行onMounted(() => {// 获取元素集合,去掉n-select下拉框的边框const myDivs = document.getElementsByClassName('n-base-selection');// 检查是否有匹配的元素if (myDivs.length > 0) {for(let i=0;i<=myDivs.length - 1;i++){// 访问第一个匹配的元素const myDiv = myDivs[i];// 移除 --n-border 样式myDiv.style.removeProperty('--n-border');}}// 去掉n-input边框const myDivs2 = document.getElementsByClassName('n-input');if (myDivs2.length > 0) {for(let i=0;i<=myDivs2.length - 1;i++){// 访问第一个匹配的元素const myDiv = myDivs2[i];// 移除 --n-border 样式myDiv.style.removeProperty('--n-border');}}});let options = ref([{label: "Drive My Car",value: "song1"},{label: "Norwegian Wood",value: "song2"}])</script><style scoped></style>
descriptions组件文章
https://blog.csdn.net/qq_34631220/article/details/145491806
2、推荐,通过css去掉
全局或者在当前vue写上这个css
/* 去掉naive边框 */
.dade-border-node .n-base-selection {--n-border: none !important;
}
.dade-border-node .n-input {--n-border: none !important;
}
在类上加dade-border-node,那一块需要去边框,就在那一块加上类dade-border-node