列表数据，单列自定义显示内容

src/assets/css/globel.css

@@ -10,4 +10,9 @@ html,body,#app{
 
 .el-card {
     box-shadow: 0 1px 1px rgba(0,0,0, .15) !important;
+}
+
+.el-table {
+    margin-top: 15px;
+    font-size: 15px;
 }

src/components/users/users.vue

@@ -18,14 +18,68 @@
           <el-button type="primary">添加用户</el-button>
         </el-col>
       </el-row>
+
+      <!--列表table-->
+      <el-table border stripe :data="userList" style="width: 100%">
+        <el-table-column label="#" type="index"></el-table-column>
+        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
+        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
+        <el-table-column prop="mobile" label="电话" width="100"></el-table-column>
+        <el-table-column prop="role_name" label="角色" width="100"></el-table-column>
+        <el-table-column  width="100" label="状态" >
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.mg_state" @change="changeState">
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column  label="操作" >
+          <template >
+            <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
+            <el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
+            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
+              <el-button  size="mini" type="warning" icon="el-icon-setting"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
     </el-card>
+
   </div>
 
 </template>
 
 <script>
 export default {
-  name: 'users'
+  data () {
+    return {
+      queryInfo: {
+        query: '',
+        pagenum: 1,
+        pagesize: 10
+      },
+      userList: [],
+      total: 0
+    }
+  },
+  methods: {
+    changeState (state) {
+      console.log(state)
+    },
+    async getUserList () {
+      const { data: res } = await this.$http.get('users', {
+        params: this.queryInfo
+      })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.userList = res.data.users
+      this.total = res.data.total
+    }
+  },
+  created () {
+    this.getUserList()
+  }
 }
 </script>
 <style lang="less" scoped></style>