完善列表权限的绑定，控制表格中列表的显示隐藏，在菜单里配置列表权限，通过v-col 或 v-cols 或 v-col-all 进行绑定，例子在用户管理页面

src/utils/authDirective.ts

@@ -1,6 +1,5 @@
 import type { App } from 'vue';
 import { smallInBig } from '/@/utils/arrayOperation';
-// import { useRoute } from 'vue-router';
 import router from '../router';
 
 /**

src/utils/colDirective.ts

@@ -0,0 +1,43 @@
+import type { App } from 'vue';
+import { smallInBig } from '/@/utils/arrayOperation';
+import router from '../router';
+
+/**
+ * 用户权限指令
+ * @directive 单个权限验证（v-col="xxx"）
+ * @directive 多个权限验证，满足一个则显示（v-cols="[xxx,xxx]"）
+ * @directive 多个权限验证，全部满足则显示（v-col-all="[xxx,xxx]"）
+ */
+export function colDirective(app: App) {
+	const allPermissions = "*/*/*"
+	// 单个权限验证（v-col="xxx"）
+	app.directive('col', {
+		mounted(el, binding) {
+			const columns = <string[]>router.currentRoute.value.meta.columns
+			if (columns.includes(allPermissions)) return
+			if (!columns.includes(binding.value)) el.parentNode.removeChild(el)
+		},
+	});
+	// 多个权限验证，满足一个则显示（v-cols="[xxx,xxx]"）
+	app.directive('cols', {
+		mounted(el, binding) {
+			const columns = <string[]>router.currentRoute.value.meta.columns
+			if (columns.includes(allPermissions)) return
+			let flag = false;
+			columns.map((val: string) => {
+				binding.value.map((v: string) => {
+					if (val === v) flag = true;
+				});
+			});
+			if (!flag) el.parentNode.removeChild(el);
+		},
+	});
+	// 多个权限验证，全部满足则显示（v-col-all="[xxx,xxx]"）
+	app.directive('col-all', {
+		mounted(el, binding) {
+			const columns = <string[]>router.currentRoute.value.meta.columns
+			if (columns.includes(allPermissions)) return
+			!smallInBig(columns, binding.value) && el.parentNode.removeChild(el)
+		},
+	});
+}

src/utils/directive.ts

@@ -1,9 +1,11 @@
 import type { App } from 'vue';
 import { authDirective } from '/@/utils/authDirective';
+import { colDirective } from '/@/utils/colDirective';
 import { wavesDirective, dragDirective } from '/@/utils/customDirective';
 
 /**
  * 导出指令方法：v-xxx
+ * @methods colDirective 用户权限指令，用法：v-col
  * @methods authDirective 用户权限指令，用法：v-auth
  * @methods wavesDirective 按钮波浪指令，用法：v-waves
  * @methods dragDirective 自定义拖动指令，用法：v-drag
@@ -11,6 +13,8 @@ import { wavesDirective, dragDirective } from '/@/utils/customDirective';
 export function directive(app: App) {
 	// 用户权限指令
 	authDirective(app);
+	// 表格列表显示
+	colDirective(app);
 	// 按钮波浪指令
 	wavesDirective(app);
 	// 自定义拖动指令

src/views/system/user/index.vue

@@ -62,11 +62,11 @@
             <!-- <el-table-column type="selection" width="55" align="center" /> -->
             <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="userName" label="账户名称" min-width="120" show-overflow-tooltip></el-table-column>
-            <el-table-column prop="userNickname" label="用户昵称" min-width="160" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="userNickname" label="用户昵称" v-col="'userNickname'" min-width="160" show-overflow-tooltip></el-table-column>
             <el-table-column prop="dept.deptName" label="部门" show-overflow-tooltip></el-table-column>
             <el-table-column label="角色" min-width="120" prop="rolesNames" :show-overflow-tooltip="true">
             </el-table-column>
-            <el-table-column prop="mobile" label="手机号" width="120" align="center"></el-table-column>
+            <el-table-column prop="mobile" label="手机号" v-col="'mobile'" width="120" align="center"></el-table-column>
             <el-table-column prop="status" label="用户状态" width="120" 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)">