用户管理

Author: sosout

README.md

@@ -80,4 +80,6 @@ yarn test
 ### 访问
 在浏览器地址栏输入[http://localhost:8080/](http://localhost:8080/)
 
-# vuex简单应用
+## vuex简单应用
+
+## vue自定义组件

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "element-ui": "^1.4.1",
+    "loading-vue": "^0.0.2",
     "store": "^2.0.12",
     "three": "^0.86.0",
     "vue": "^2.3.3",

src/components/layout/consoleNavbar.vue

@@ -88,7 +88,6 @@ export default {
   },
   computed: {
     defaultActive: function() {
-      console.log(this.$route.path);
       return this.$route.path;
     }
   }

src/page/user/user.vue

@@ -1,13 +1,81 @@
 <template>
-  <div class="hello">用户管理</div>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      label="日期"
+      width="180">
+      <template scope="scope">
+        <el-icon name="time"></el-icon>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="姓名"
+      width="180">
+      <template scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>姓名: {{ scope.row.name }}</p>
+          <p>住址: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag>{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <template scope="scope">
+        <el-button
+          size="small"
+          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        <el-button
+          size="small"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 
 <script>
+import { Table, TableColumn, Icon, Popover, Tag, Button } from 'element-ui';
 export default {
-  name: 'User',
+  components: {
+    ElTable: Table,
+    ElTableColumn: TableColumn,
+    ElIcon: Icon,
+    ElPopover: Popover,
+    ElTag: Tag,
+    ElButton: Button
+  },
   data () {
     return {
-
+      tableData: [{
+        date: '2017-08-06',
+        name: 'sosout',
+        address: '浙江省杭州市滨江区'
+      }, {
+        date: '2017-08-06',
+        name: 'sosout',
+        address: '浙江省杭州市滨江区'
+      }, {
+        date: '2017-08-06',
+        name: 'sosout',
+        address: '浙江省杭州市滨江区'
+      }, {
+        date: '2017-08-06',
+        name: 'sosout',
+        address: '浙江省杭州市滨江区'
+      }]
+    }
+  },
+  methods: {
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
     }
   }
 }

yarn.lock

@@ -200,6 +200,12 @@ [email protected]:
   version "1.6.9"
   resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.6.9.tgz#a8309daa8b83421cdbd4628e026d6abb25192d34"
 
+async-validator@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.7.1.tgz#89d3d7a384ca5d05e0f07bf51754d591e2cfec61"
+  dependencies:
+    babel-runtime "6.x"
+
 [email protected], async@^1.4.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -782,7 +788,7 @@ babel-register@^6.22.0, babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0:
+babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1393,7 +1399,7 @@ copy-webpack-plugin@^4.0.1:
     minimatch "^3.0.0"
     node-dir "^0.1.10"
 
-core-js@^2.2.0, core-js@^2.4.0:
+core-js@^2.2.0, core-js@^2.4.0, core-js@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
@@ -1655,7 +1661,7 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-deepmerge@^1.2.0:
+deepmerge@^1.2.0, deepmerge@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.0.tgz#00bc5b88fd23b8130f9f5049071c3420e07a5465"
 
@@ -3178,6 +3184,10 @@ loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+loading-vue@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/loading-vue/-/loading-vue-0.0.2.tgz#34029a6d08ed3e98bfdf1d52dac436da3e200754"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -4020,6 +4030,10 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+popper.js@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-0.6.4.tgz#1837c4760af54d2bb20b66f9c09b92993d84c629"
+
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5458,6 +5472,15 @@ vuex@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-2.3.1.tgz#cde8e997c1f9957719bc7dea154f9aa691d981a6"
 
+vuui@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/vuui/-/vuui-1.0.5.tgz#09c8345160d46329ea5d851d558f5f9132814152"
+  dependencies:
+    async-validator "^1.7.1"
+    core-js "^2.4.1"
+    deepmerge "^1.5.0"
+    popper.js "^0.6.4"
+
 watchpack@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"