修改自定义指令 v-auth 讲原来的移除节点，改为增加class v-disabled 通过css来控制节点的透明度和不可点击

src/theme/index.scss

@@ -9,3 +9,8 @@
 @import './fast.scss';
 
 
+// 自定义指令 v-auth 增加 v-disabled 的类
+.v-disabled{
+  pointer-events: none;
+  opacity: 0.7;
+}

src/utils/authDirective.ts

@@ -15,7 +15,10 @@ export function authDirective(app: App) {
 		mounted(el, binding) {
 			const buttons = <string[]>router.currentRoute.value.meta.buttons
 			if (buttons.includes(allPermissions)) return
-			if (!buttons.includes(binding.value)) el.parentNode.removeChild(el)
+			// 不显示该dom
+			// if (!buttons.includes(binding.value)) el.parentNode.removeChild(el)
+			// 设置为disabled
+			if (!buttons.includes(binding.value)) el.classList.add('v-disabled')
 		},
 	});
 	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
@@ -29,7 +32,8 @@ export function authDirective(app: App) {
 					if (val === v) flag = true;
 				});
 			});
-			if (!flag) el.parentNode.removeChild(el);
+			// if (!flag) el.parentNode.removeChild(el);
+			if (!flag) el.classList.add('v-disabled')
 		},
 	});
 	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
@@ -37,7 +41,8 @@ export function authDirective(app: App) {
 		mounted(el, binding) {
 			const buttons = <string[]>router.currentRoute.value.meta.buttons
 			if (buttons.includes(allPermissions)) return
-			!smallInBig(buttons, binding.value) && el.parentNode.removeChild(el)
+			// !smallInBig(buttons, binding.value) && el.parentNode.removeChild(el)
+			!smallInBig(buttons, binding.value) && el.classList.add('v-disabled')
 		},
 	});
 }

src/views/system/manage/user/index.vue

@@ -68,7 +68,7 @@
 						<el-table-column prop="mobile" label="手机号" v-col="'mobile'" width="120" align="center"></el-table-column>
 						<el-table-column prop="status" label="用户状态" width="120" v-col="'status'" align="center">
 							<template #default="scope">
-								<el-switch v-model="scope.row.status" :disabled="scope.row.id === 1" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+								<el-switch v-model="scope.row.status" :disabled="scope.row.id === 1" v-auth="'change-status'" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
 								</el-switch>
 							</template>
 						</el-table-column>