cnlive_project / cnlive-community-web-vue · Commits

Commit 22109ef8e2e17d38e80ff9a72f0bae9bd4eeb6a8

Authored by 杨泽宇
1 parent 1cf926f8

布局滚动、分页滚动到页面顶部

Inline Side-by-side
Showing 9 changed files with 440 additions and 36 deletions
README.md
  View file @22109ef
@@ -27,6 +27,9 @@ cnlive-community-web-vue 中国网+智慧社区平台 @@ -27,6 +27,9 @@ cnlive-community-web-vue 中国网+智慧社区平台
27 + 测试： 27 + 测试：
28 + test.community.api.cnlive.com 28 + test.community.api.cnlive.com
29 + test.community.web.cnlive.com 29 + test.community.web.cnlive.com
  30 + + 服务器地址：120.92.119.11
  31 + + 账号：root
  32 + + 密码：du=K0dB1z
30 33
31 ## 测试账号 34 ## 测试账号
32 35
@@ -65,6 +68,7 @@ cnlive-community-web-vue 中国网+智慧社区平台 @@ -65,6 +68,7 @@ cnlive-community-web-vue 中国网+智慧社区平台
65 * varible.ts 全局静态变量 68 * varible.ts 全局静态变量
66 * tool.ts 全局方法 69 * tool.ts 全局方法
67 * validate.ts 格式验证方法 70 * validate.ts 格式验证方法
  71 + * scroll.ts 页面滚动
68 * views 业务逻辑页面 72 * views 业务逻辑页面
69 * dashboard 欢迎页 73 * dashboard 欢迎页
70 * user 用户管理 包含登录注册 74 * user 用户管理 包含登录注册
src/App.vue
  View file @22109ef
@@ -32,6 +32,6 @@ @@ -32,6 +32,6 @@
32 -moz-osx-font-smoothing: grayscale; 32 -moz-osx-font-smoothing: grayscale;
33 text-align: center; 33 text-align: center;
34 color: #2c3e50; 34 color: #2c3e50;
35 - /* margin-top: 60px; */ 35 + overflow: hidden;
36 } 36 }
37 </style> 37 </style>
src/components/Pagination/index.vue
  View file @22109ef
@@ -5,6 +5,8 @@ @@ -5,6 +5,8 @@
5 * @author Tengxi 5 * @author Tengxi
6 */ 6 */
7 7
  8 +import { scrollTo } from '@/utils/scroll'
  9 +
8 // TIP 每个属性都必传，不带默认值 10 // TIP 每个属性都必传，不带默认值
9 // defineProps<{ 11 // defineProps<{
10 // total: number; 12 // total: number;
@@ -41,6 +43,7 @@ const props = withDefaults(defineProps&lt;Props&gt;(), { @@ -41,6 +43,7 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
41 * @description 每页内容条数变化响应 43 * @description 每页内容条数变化响应
42 */ 44 */
43 const handleSizeChange = (val) => { 45 const handleSizeChange = (val) => {
  46 + scrollTo(0, 800)
44 emit("pageChange", props.currentPage, val, props.tagName); 47 emit("pageChange", props.currentPage, val, props.tagName);
45 }; 48 };
46 /** 49 /**
@@ -48,6 +51,7 @@ const handleSizeChange = (val) =&gt; { @@ -48,6 +51,7 @@ const handleSizeChange = (val) =&gt; {
48 * @description 当前页码变化响应 51 * @description 当前页码变化响应
49 */ 52 */
50 const handleCurrentChange = (val) => { 53 const handleCurrentChange = (val) => {
  54 + scrollTo(0, 800)
51 emit("pageChange", val, props.pageSize, props.tagName); 55 emit("pageChange", val, props.pageSize, props.tagName);
52 }; 56 };
53 const emit = defineEmits<{ 57 const emit = defineEmits<{
src/layout/enter.vue
  View file @22109ef
@@ -8,7 +8,7 @@ import { ref } from &quot;vue&quot;; @@ -8,7 +8,7 @@ import { ref } from &quot;vue&quot;;
8 import Header from "./header.vue"; 8 import Header from "./header.vue";
9 import Menu from "./menu.vue"; 9 import Menu from "./menu.vue";
10 import * as store from "@/pinia/index"; 10 import * as store from "@/pinia/index";
11 -let key = ref("/") 11 +let key = ref("/");
12 </script> 12 </script>
13 13
14 <template> 14 <template>
@@ -22,25 +22,30 @@ let key = ref(&quot;/&quot;) @@ -22,25 +22,30 @@ let key = ref(&quot;/&quot;)
22 </div> 22 </div>
23 <!-- TIP 左侧菜单结束 --> 23 <!-- TIP 左侧菜单结束 -->
24 <!-- TIP 右侧具体页面内容 --> 24 <!-- TIP 右侧具体页面内容 -->
25 - <div :class="store.family.appStore().isCollapse? 'thinMenu': 'fatMenu'">  
26 - <router-view v-slot="{ Component, route }">  
27 - <transition :name="route.meta.transitionName">  
28 - <keep-alive v-if="route.meta.keepAlive">  
29 - <component :is="Component" />  
30 - </keep-alive>  
31 - <component :is="Component" v-else />  
32 - </transition>  
33 - </router-view> 25 + <div
  26 + class="view-container"
  27 + :class="store.family.appStore().isCollapse ? 'thinMenu' : 'fatMenu'"
  28 + >
  29 + <el-scrollbar wrap-class="scrollbar-wrapper">
  30 + <router-view v-slot="{ Component, route }">
  31 + <transition :name="route.meta.transitionName">
  32 + <keep-alive v-if="route.meta.keepAlive">
  33 + <component :is="Component" />
  34 + </keep-alive>
  35 + <component :is="Component" v-else />
  36 + </transition>
  37 + </router-view>
  38 + </el-scrollbar>
34 </div> 39 </div>
35 <!-- TIP 右侧具体页面内容结束 --> 40 <!-- TIP 右侧具体页面内容结束 -->
36 </div> 41 </div>
37 </template> 42 </template>
38 43
39 <style scoped lang="scss"> 44 <style scoped lang="scss">
40 - .fatMenu {  
41 - margin-left: $sideBarWidth!important;  
42 - }  
43 - .thinMenu {  
44 - margin-left: $sideBarWidthThin!important;  
45 - } 45 +.fatMenu {
  46 + margin-left: $sideBarWidth !important;
  47 +}
  48 +.thinMenu {
  49 + margin-left: $sideBarWidthThin !important;
  50 +}
46 </style> 51 </style>
src/layout/header.vue
  View file @22109ef
@@ -24,11 +24,13 @@ const toggleMenu = () =&gt; { @@ -24,11 +24,13 @@ const toggleMenu = () =&gt; {
24 <div class="header-container clearfix"> 24 <div class="header-container clearfix">
25 <!-- TIP logo --> 25 <!-- TIP logo -->
26 <div class="left-logo" :class="store.family.appStore().isCollapse? 'thinLogo': 'fatLogo'"> 26 <div class="left-logo" :class="store.family.appStore().isCollapse? 'thinLogo': 'fatLogo'">
27 - <el-image  
28 - :src="globalProperties.$cnliveLogo"  
29 - fit="contain"  
30 - style="height: 40px"  
31 - ></el-image> 27 + <router-link to="/">
  28 + <el-image
  29 + :src="globalProperties.$cnliveLogo"
  30 + fit="contain"
  31 + style="height: 40px"
  32 + ></el-image>
  33 + </router-link>
32 </div> 34 </div>
33 <!-- TIP logo结束 --> 35 <!-- TIP logo结束 -->
34 <!-- TIP 控制菜单collapse的按钮 --> 36 <!-- TIP 控制菜单collapse的按钮 -->
@@ -39,6 +41,8 @@ const toggleMenu = () =&gt; { @@ -39,6 +41,8 @@ const toggleMenu = () =&gt; {
39 <!-- TIP 控制菜单collapse的按钮结束 --> 41 <!-- TIP 控制菜单collapse的按钮结束 -->
40 <!-- TIP 功能键 --> 42 <!-- TIP 功能键 -->
41 <div class="right-buttons"> 43 <div class="right-buttons">
  44 + <el-button type="text">站内消息</el-button>
  45 + <el-button type="text"><router-link to="/">首页</router-link></el-button>
42 <el-button type="text">帮助</el-button> 46 <el-button type="text">帮助</el-button>
43 <el-button type="text">用户：管理员</el-button> 47 <el-button type="text">用户：管理员</el-button>
44 <el-button type="text">退出</el-button> 48 <el-button type="text">退出</el-button>
@@ -51,6 +55,10 @@ const toggleMenu = () =&gt; { @@ -51,6 +55,10 @@ const toggleMenu = () =&gt; {
51 .header-container { 55 .header-container {
52 padding: 0 20px 0 0; 56 padding: 0 20px 0 0;
53 height: 60px; 57 height: 60px;
  58 + top: 0;
  59 + position: fixed;
  60 + z-index: 1000;
  61 + width: 100%;
54 line-height: 60px; 62 line-height: 60px;
55 background-color: white; 63 background-color: white;
56 box-shadow: 0 1px 4px rgba(0,21,41,.08); 64 box-shadow: 0 1px 4px rgba(0,21,41,.08);
src/layout/menu.vue
  View file @22109ef
@@ -49,6 +49,240 @@ let styleData = computed(()=&gt;{ @@ -49,6 +49,240 @@ let styleData = computed(()=&gt;{
49 <el-menu-item index="1-4-1">item one</el-menu-item> 49 <el-menu-item index="1-4-1">item one</el-menu-item>
50 </el-sub-menu> 50 </el-sub-menu>
51 </el-sub-menu> 51 </el-sub-menu>
  52 + <el-sub-menu index="1">
  53 + <template #title>
  54 + <el-icon><location /></el-icon>
  55 + <span>Navigator One</span>
  56 + </template>
  57 + <el-menu-item-group>
  58 + <template #title><span>Group One</span></template>
  59 + <el-menu-item index="1-1">item one</el-menu-item>
  60 + <el-menu-item index="1-2">item two</el-menu-item>
  61 + </el-menu-item-group>
  62 + <el-menu-item-group title="Group Two">
  63 + <el-menu-item index="1-3">item three</el-menu-item>
  64 + </el-menu-item-group>
  65 + <el-sub-menu index="1-4">
  66 + <template #title><span>item four</span></template>
  67 + <el-menu-item index="1-4-1">item one</el-menu-item>
  68 + </el-sub-menu>
  69 + </el-sub-menu>
  70 + <el-sub-menu index="1">
  71 + <template #title>
  72 + <el-icon><location /></el-icon>
  73 + <span>Navigator One</span>
  74 + </template>
  75 + <el-menu-item-group>
  76 + <template #title><span>Group One</span></template>
  77 + <el-menu-item index="1-1">item one</el-menu-item>
  78 + <el-menu-item index="1-2">item two</el-menu-item>
  79 + </el-menu-item-group>
  80 + <el-menu-item-group title="Group Two">
  81 + <el-menu-item index="1-3">item three</el-menu-item>
  82 + </el-menu-item-group>
  83 + <el-sub-menu index="1-4">
  84 + <template #title><span>item four</span></template>
  85 + <el-menu-item index="1-4-1">item one</el-menu-item>
  86 + </el-sub-menu>
  87 + </el-sub-menu>
  88 + <el-sub-menu index="1">
  89 + <template #title>
  90 + <el-icon><location /></el-icon>
  91 + <span>Navigator One</span>
  92 + </template>
  93 + <el-menu-item-group>
  94 + <template #title><span>Group One</span></template>
  95 + <el-menu-item index="1-1">item one</el-menu-item>
  96 + <el-menu-item index="1-2">item two</el-menu-item>
  97 + </el-menu-item-group>
  98 + <el-menu-item-group title="Group Two">
  99 + <el-menu-item index="1-3">item three</el-menu-item>
  100 + </el-menu-item-group>
  101 + <el-sub-menu index="1-4">
  102 + <template #title><span>item four</span></template>
  103 + <el-menu-item index="1-4-1">item one</el-menu-item>
  104 + </el-sub-menu>
  105 + </el-sub-menu>
  106 + <el-sub-menu index="1">
  107 + <template #title>
  108 + <el-icon><location /></el-icon>
  109 + <span>Navigator One</span>
  110 + </template>
  111 + <el-menu-item-group>
  112 + <template #title><span>Group One</span></template>
  113 + <el-menu-item index="1-1">item one</el-menu-item>
  114 + <el-menu-item index="1-2">item two</el-menu-item>
  115 + </el-menu-item-group>
  116 + <el-menu-item-group title="Group Two">
  117 + <el-menu-item index="1-3">item three</el-menu-item>
  118 + </el-menu-item-group>
  119 + <el-sub-menu index="1-4">
  120 + <template #title><span>item four</span></template>
  121 + <el-menu-item index="1-4-1">item one</el-menu-item>
  122 + </el-sub-menu>
  123 + </el-sub-menu>
  124 + <el-sub-menu index="1">
  125 + <template #title>
  126 + <el-icon><location /></el-icon>
  127 + <span>Navigator One</span>
  128 + </template>
  129 + <el-menu-item-group>
  130 + <template #title><span>Group One</span></template>
  131 + <el-menu-item index="1-1">item one</el-menu-item>
  132 + <el-menu-item index="1-2">item two</el-menu-item>
  133 + </el-menu-item-group>
  134 + <el-menu-item-group title="Group Two">
  135 + <el-menu-item index="1-3">item three</el-menu-item>
  136 + </el-menu-item-group>
  137 + <el-sub-menu index="1-4">
  138 + <template #title><span>item four</span></template>
  139 + <el-menu-item index="1-4-1">item one</el-menu-item>
  140 + </el-sub-menu>
  141 + </el-sub-menu>
  142 + <el-sub-menu index="1">
  143 + <template #title>
  144 + <el-icon><location /></el-icon>
  145 + <span>Navigator One</span>
  146 + </template>
  147 + <el-menu-item-group>
  148 + <template #title><span>Group One</span></template>
  149 + <el-menu-item index="1-1">item one</el-menu-item>
  150 + <el-menu-item index="1-2">item two</el-menu-item>
  151 + </el-menu-item-group>
  152 + <el-menu-item-group title="Group Two">
  153 + <el-menu-item index="1-3">item three</el-menu-item>
  154 + </el-menu-item-group>
  155 + <el-sub-menu index="1-4">
  156 + <template #title><span>item four</span></template>
  157 + <el-menu-item index="1-4-1">item one</el-menu-item>
  158 + </el-sub-menu>
  159 + </el-sub-menu>
  160 + <el-sub-menu index="1">
  161 + <template #title>
  162 + <el-icon><location /></el-icon>
  163 + <span>Navigator One</span>
  164 + </template>
  165 + <el-menu-item-group>
  166 + <template #title><span>Group One</span></template>
  167 + <el-menu-item index="1-1">item one</el-menu-item>
  168 + <el-menu-item index="1-2">item two</el-menu-item>
  169 + </el-menu-item-group>
  170 + <el-menu-item-group title="Group Two">
  171 + <el-menu-item index="1-3">item three</el-menu-item>
  172 + </el-menu-item-group>
  173 + <el-sub-menu index="1-4">
  174 + <template #title><span>item four</span></template>
  175 + <el-menu-item index="1-4-1">item one</el-menu-item>
  176 + </el-sub-menu>
  177 + </el-sub-menu>
  178 + <el-sub-menu index="1">
  179 + <template #title>
  180 + <el-icon><location /></el-icon>
  181 + <span>Navigator One</span>
  182 + </template>
  183 + <el-menu-item-group>
  184 + <template #title><span>Group One</span></template>
  185 + <el-menu-item index="1-1">item one</el-menu-item>
  186 + <el-menu-item index="1-2">item two</el-menu-item>
  187 + </el-menu-item-group>
  188 + <el-menu-item-group title="Group Two">
  189 + <el-menu-item index="1-3">item three</el-menu-item>
  190 + </el-menu-item-group>
  191 + <el-sub-menu index="1-4">
  192 + <template #title><span>item four</span></template>
  193 + <el-menu-item index="1-4-1">item one</el-menu-item>
  194 + </el-sub-menu>
  195 + </el-sub-menu>
  196 + <el-sub-menu index="1">
  197 + <template #title>
  198 + <el-icon><location /></el-icon>
  199 + <span>Navigator One</span>
  200 + </template>
  201 + <el-menu-item-group>
  202 + <template #title><span>Group One</span></template>
  203 + <el-menu-item index="1-1">item one</el-menu-item>
  204 + <el-menu-item index="1-2">item two</el-menu-item>
  205 + </el-menu-item-group>
  206 + <el-menu-item-group title="Group Two">
  207 + <el-menu-item index="1-3">item three</el-menu-item>
  208 + </el-menu-item-group>
  209 + <el-sub-menu index="1-4">
  210 + <template #title><span>item four</span></template>
  211 + <el-menu-item index="1-4-1">item one</el-menu-item>
  212 + </el-sub-menu>
  213 + </el-sub-menu>
  214 + <el-sub-menu index="1">
  215 + <template #title>
  216 + <el-icon><location /></el-icon>
  217 + <span>Navigator One</span>
  218 + </template>
  219 + <el-menu-item-group>
  220 + <template #title><span>Group One</span></template>
  221 + <el-menu-item index="1-1">item one</el-menu-item>
  222 + <el-menu-item index="1-2">item two</el-menu-item>
  223 + </el-menu-item-group>
  224 + <el-menu-item-group title="Group Two">
  225 + <el-menu-item index="1-3">item three</el-menu-item>
  226 + </el-menu-item-group>
  227 + <el-sub-menu index="1-4">
  228 + <template #title><span>item four</span></template>
  229 + <el-menu-item index="1-4-1">item one</el-menu-item>
  230 + </el-sub-menu>
  231 + </el-sub-menu>
  232 + <el-sub-menu index="1">
  233 + <template #title>
  234 + <el-icon><location /></el-icon>
  235 + <span>Navigator One</span>
  236 + </template>
  237 + <el-menu-item-group>
  238 + <template #title><span>Group One</span></template>
  239 + <el-menu-item index="1-1">item one</el-menu-item>
  240 + <el-menu-item index="1-2">item two</el-menu-item>
  241 + </el-menu-item-group>
  242 + <el-menu-item-group title="Group Two">
  243 + <el-menu-item index="1-3">item three</el-menu-item>
  244 + </el-menu-item-group>
  245 + <el-sub-menu index="1-4">
  246 + <template #title><span>item four</span></template>
  247 + <el-menu-item index="1-4-1">item one</el-menu-item>
  248 + </el-sub-menu>
  249 + </el-sub-menu>
  250 + <el-sub-menu index="1">
  251 + <template #title>
  252 + <el-icon><location /></el-icon>
  253 + <span>Navigator One</span>
  254 + </template>
  255 + <el-menu-item-group>
  256 + <template #title><span>Group One</span></template>
  257 + <el-menu-item index="1-1">item one</el-menu-item>
  258 + <el-menu-item index="1-2">item two</el-menu-item>
  259 + </el-menu-item-group>
  260 + <el-menu-item-group title="Group Two">
  261 + <el-menu-item index="1-3">item three</el-menu-item>
  262 + </el-menu-item-group>
  263 + <el-sub-menu index="1-4">
  264 + <template #title><span>item four</span></template>
  265 + <el-menu-item index="1-4-1">item one</el-menu-item>
  266 + </el-sub-menu>
  267 + </el-sub-menu>
  268 + <el-sub-menu index="1">
  269 + <template #title>
  270 + <el-icon><location /></el-icon>
  271 + <span>Navigator One</span>
  272 + </template>
  273 + <el-menu-item-group>
  274 + <template #title><span>Group One</span></template>
  275 + <el-menu-item index="1-1">item one</el-menu-item>
  276 + <el-menu-item index="1-2">item two</el-menu-item>
  277 + </el-menu-item-group>
  278 + <el-menu-item-group title="Group Two">
  279 + <el-menu-item index="1-3">item three</el-menu-item>
  280 + </el-menu-item-group>
  281 + <el-sub-menu index="1-4">
  282 + <template #title><span>item four</span></template>
  283 + <el-menu-item index="1-4-1">item one</el-menu-item>
  284 + </el-sub-menu>
  285 + </el-sub-menu>
52 <el-menu-item index="2"> 286 <el-menu-item index="2">
53 <el-icon><icon-menu /></el-icon> 287 <el-icon><icon-menu /></el-icon>
54 <template #title>Navigator Two</template> 288 <template #title>Navigator Two</template>
src/style/menu.scss
  View file @22109ef
@@ -3,9 +3,14 @@ @@ -3,9 +3,14 @@
3 *zoom: 1; position: relative; 3 *zoom: 1; position: relative;
4 .sidebar-container { 4 .sidebar-container {
5 width: $sideBarWidth; 5 width: $sideBarWidth;
6 - position: absolute; 6 + height: 100vh;
  7 + position: fixed;
7 left: 0; 8 left: 0;
8 - top: 0; 9 + top: 60px;
  10 + }
  11 + .view-container {
  12 + height: 100vh;
  13 + padding-top: 60px;
9 } 14 }
10 } 15 }
11 16
src/utils/scroll.ts 0 → 100644
  View file @22109ef
  1 +const easeInOutQuad = function (t, b, c, d) {
  2 + t /= d / 2
  3 + if (t < 1) {
  4 + return c / 2 * t * t + b
  5 + }
  6 + t--
  7 + return -c / 2 * (t * (t - 2) - 1) + b
  8 +}
  9 +
  10 +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
  11 +var requestAnimFrame = (function() {
  12 + return globalThis.requestAnimationFrame || globalThis.webkitRequestAnimationFrame || globalThis.mozRequestAnimationFrame || function(callback) { globalThis.setTimeout(callback, 1000 / 60) }
  13 +})()
  14 +
  15 +/**
  16 + * Because it's so fucking difficult to detect the scrolling element, just move them all
  17 + * @param {number} amount
  18 + */
  19 +function move(amount) {
  20 + document.documentElement.scrollTop = amount
  21 + // document.body.parentNode.scrollTop = amount
  22 + document.body.scrollTop = amount
  23 +}
  24 +
  25 +function position() {
  26 + // return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
  27 + return document.documentElement.scrollTop || document.body.scrollTop
  28 +}
  29 +
  30 +/**
  31 + * @param {number} to
  32 + * @param {number} duration
  33 + * @param {Function} callback
  34 + */
  35 +export function scrollTo(to, duration, callback) {
  36 + const start = position()
  37 + const change = to - start
  38 + const increment = 20
  39 + let currentTime = 0
  40 + duration = (typeof (duration) === 'undefined') ? 500 : duration
  41 + var animateScroll = function() {
  42 + // increment the time
  43 + currentTime += increment
  44 + // find the value with the quadratic in-out easing function
  45 + var val = easeInOutQuad(currentTime, start, change, duration)
  46 + // move the document.body
  47 + move(val)
  48 + // do the animation unless its over
  49 + if (currentTime < duration) {
  50 + requestAnimFrame(animateScroll)
  51 + } else {
  52 + if (callback && typeof (callback) === 'function') {
  53 + // the animation is done so lets callback
  54 + callback()
  55 + }
  56 + }
  57 + }
  58 + animateScroll()
  59 +}
src/views/tengxi/about.vue
  View file @22109ef
1 <script setup lang="ts"> 1 <script setup lang="ts">
2 import { reactive,getCurrentInstance } from "vue"; 2 import { reactive,getCurrentInstance } from "vue";
3 import {globalFilters} from '@/utils/tool' 3 import {globalFilters} from '@/utils/tool'
  4 +import Pagination from '@/components/Pagination/index.vue'
4 // import {tengxiTestStore} from '@/pinia/index' 5 // import {tengxiTestStore} from '@/pinia/index'
5 import * as all from '@/pinia/index' 6 import * as all from '@/pinia/index'
6 console.log(all) 7 console.log(all)
@@ -8,22 +9,16 @@ console.log(all) @@ -8,22 +9,16 @@ console.log(all)
8 // console.log(store) 9 // console.log(store)
9 const data = reactive([ 10 const data = reactive([
10 { 11 {
11 - date: "2016-05-02",  
12 - name: "王小虎1",  
13 - address: "上海市普陀区金沙江路 1518 弄",  
14 - status: 1  
15 - },  
16 - {  
17 - date: "2016-05-04", 12 + date: "2016-05-03",
18 name: "王小虎", 13 name: "王小虎",
19 - address: "上海市普陀区金沙江路 1517 弄",  
20 - status: 2 14 + address: "上海市普陀区金沙江路 1516 弄",
  15 + status: 0
21 }, 16 },
22 { 17 {
23 - date: "2016-05-01", 18 + date: "2016-05-03",
24 name: "王小虎", 19 name: "王小虎",
25 - address: "上海市普陀区金沙江路 1519 弄",  
26 - status: null 20 + address: "上海市普陀区金沙江路 1516 弄",
  21 + status: 0
27 }, 22 },
28 { 23 {
29 date: "2016-05-03", 24 date: "2016-05-03",
@@ -55,6 +50,20 @@ const thisLine = (obj) =&gt; { @@ -55,6 +50,20 @@ const thisLine = (obj) =&gt; {
55 console.log(obj.status) 50 console.log(obj.status)
56 } 51 }
57 52
  53 +const pageDataStore = reactive({
  54 + page: 1,
  55 + pageSize: 10
  56 + })
  57 +
  58 + const test = (page, size, tagName) => {
  59 + console.log('分页的回调')
  60 + console.log(page)
  61 + console.log(size)
  62 + console.log(tagName)
  63 + pageDataStore.page = page
  64 + pageDataStore.pageSize = size
  65 + }
  66 +
58 // const addAge = () => { 67 // const addAge = () => {
59 // console.log('add one age') 68 // console.log('add one age')
60 // console.log(store.age) 69 // console.log(store.age)
@@ -89,5 +98,81 @@ const thisLine = (obj) =&gt; { @@ -89,5 +98,81 @@ const thisLine = (obj) =&gt; {
89 </template> 98 </template>
90 </el-table-column> 99 </el-table-column>
91 </el-table> 100 </el-table>
  101 + <el-table :data="data" style="width: 100%" border>
  102 + <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  103 + <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  104 + <el-table-column prop="address" label="地址"> </el-table-column>
  105 + <el-table-column prop="status" label="状态">
  106 + <template #default="scope">
  107 + {{globalFilters(scope.row.status, statusArray)}}
  108 + </template>
  109 + </el-table-column>
  110 + <el-table-column label="按钮">
  111 + <template #default="scope">
  112 + <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
  113 + </template>
  114 + </el-table-column>
  115 + </el-table>
  116 + <el-table :data="data" style="width: 100%" border>
  117 + <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  118 + <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  119 + <el-table-column prop="address" label="地址"> </el-table-column>
  120 + <el-table-column prop="status" label="状态">
  121 + <template #default="scope">
  122 + {{globalFilters(scope.row.status, statusArray)}}
  123 + </template>
  124 + </el-table-column>
  125 + <el-table-column label="按钮">
  126 + <template #default="scope">
  127 + <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
  128 + </template>
  129 + </el-table-column>
  130 + </el-table>
  131 + <el-table :data="data" style="width: 100%" border>
  132 + <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  133 + <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  134 + <el-table-column prop="address" label="地址"> </el-table-column>
  135 + <el-table-column prop="status" label="状态">
  136 + <template #default="scope">
  137 + {{globalFilters(scope.row.status, statusArray)}}
  138 + </template>
  139 + </el-table-column>
  140 + <el-table-column label="按钮">
  141 + <template #default="scope">
  142 + <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
  143 + </template>
  144 + </el-table-column>
  145 + </el-table>
  146 + <Pagination tagName="second" :total="data.length" :currentPage="pageDataStore.page" :pageSize="pageDataStore.pageSize" @pageChange="test"></Pagination>
  147 + <el-table :data="data" style="width: 100%" border>
  148 + <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  149 + <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  150 + <el-table-column prop="address" label="地址"> </el-table-column>
  151 + <el-table-column prop="status" label="状态">
  152 + <template #default="scope">
  153 + {{globalFilters(scope.row.status, statusArray)}}
  154 + </template>
  155 + </el-table-column>
  156 + <el-table-column label="按钮">
  157 + <template #default="scope">
  158 + <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
  159 + </template>
  160 + </el-table-column>
  161 + </el-table>
  162 + <el-table :data="data" style="width: 100%" border>
  163 + <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  164 + <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  165 + <el-table-column prop="address" label="地址"> </el-table-column>
  166 + <el-table-column prop="status" label="状态">
  167 + <template #default="scope">
  168 + {{globalFilters(scope.row.status, statusArray)}}
  169 + </template>
  170 + </el-table-column>
  171 + <el-table-column label="按钮">
  172 + <template #default="scope">
  173 + <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
  174 + </template>
  175 + </el-table-column>
  176 + </el-table>
92 </div> 177 </div>
93 </template> 178 </template>