diff --git a/src/lang/en.js b/src/lang/en.js
index 656b746b..2af355b1 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -87,7 +87,8 @@ export default {
   },
   permission: {
     roles: 'Your roles',
-    switchRoles: 'Switch roles'
+    switchRoles: 'Switch roles',
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
   },
   guide: {
     description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
diff --git a/src/lang/es.js b/src/lang/es.js
index 69218ad2..1268f083 100755
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -87,7 +87,8 @@ export default {
   },
   permission: {
     roles: 'Tus permisos',
-    switchRoles: 'Cambiar permisos'
+    switchRoles: 'Cambiar permisos',
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
   },
   guide: {
     description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 021a5fa7..4371713f 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -87,7 +87,8 @@ export default {
   },
   permission: {
     roles: '你的权限',
-    switchRoles: '切换权限'
+    switchRoles: '切换权限',
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
   },
   guide: {
     description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 2817f1c5..df277ddc 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -2,29 +2,53 @@
   <div class="app-container">
     <switch-roles @change="handleRolesChange" />
     <div :key="key" style="margin-top:30px;">
-      <span v-permission="['admin']" class="permission-alert">
-        Only
-        <el-tag class="permission-tag" size="small">admin</el-tag> can see this
-      </span>
-      <span v-permission="['editor']" class="permission-alert">
-        Only
-        <el-tag class="permission-tag" size="small">editor</el-tag> can see this
-      </span>
-      <span v-permission="['admin','editor']" class="permission-alert">
-        Both
-        <el-tag class="permission-tag" size="small">admin</el-tag> and
-        <el-tag class="permission-tag" size="small">editor</el-tag> can see this
-      </span>
+      <div>
+        <span v-permission="['admin']" class="permission-alert">
+          Only
+          <el-tag class="permission-tag" size="small">admin</el-tag> can see this
+        </span>
+        <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">v-permission="['admin']"</el-tag>
+      </div>
+
+      <div>
+        <span v-permission="['editor']" class="permission-alert">
+          Only
+          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+        </span>
+        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">v-permission="['editor']"</el-tag>
+      </div>
+
+      <div>
+        <span v-permission="['admin','editor']" class="permission-alert">
+          Both
+          <el-tag class="permission-tag" size="small">admin</el-tag> and
+          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+        </span>
+        <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">v-permission="['admin','editor']"</el-tag>
+      </div>
     </div>
 
-    <div :key="'checkPermission'+key" style="margin-top:30px;">
-      <code>In some cases it is not suitable to use v-permission, such as element Tab component  which can only be achieved by manually setting the v-if.
+    <div :key="'checkPermission'+key" style="margin-top:60px;">
+      <code>
+        {{ $t('permission.tips') }}
         <br> e.g.
       </code>
-      <el-tabs type="border-card" style="width:500px;">
-        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
-        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
-        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
+
+      <el-tabs type="border-card" style="width:550px;">
+        <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
+          Admin can see this
+          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin'])"</el-tag>
+        </el-tab-pane>
+
+        <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
+          Editor can see this
+          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['editor'])"</el-tag>
+        </el-tab-pane>
+
+        <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
+          Both admin or editor can see this
+          <el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin','editor'])"</el-tag>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -57,14 +81,17 @@ export default{
 .app-container {
   /deep/ .permission-alert {
     width: 320px;
-    margin-top: 30px;
+    margin-top: 15px;
     background-color: #f0f9eb;
     color: #67c23a;
     padding: 8px 16px;
     border-radius: 4px;
-    display: block;
+    display: inline-block;
   }
-  /deep/ .permission-tag{
+  /deep/ .permission-sourceCode {
+    margin-left: 15px;
+  }
+  /deep/ .permission-tag {
     background-color: #ecf5ff;
   }
 }