• ElementUl-布局+分页+表格+导航栏

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="cdn.jsdelivr.net_npm_vue@2_dist_vue.js">script>
    9.     <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js">script>
    10.     
    11.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    12.     
    13.     <script src="https://unpkg.com/element-ui/lib/index.js">script>
    14.  
    15. head>
    16.  
    17. <body>
    18.     <div id="app">
    19.         <template>
    20.             <el-table :data="tableData" style="width: 100%">
    21.                 <el-table-column label="日期" width="180">
    22.                     <template slot-scope="scope">
    23.                         <span style="margin-left: 10px">{{ scope.row.date }}span>
    24.                     template>
    25.                 el-table-column>
    26.                 <el-table-column label="姓名" width="180">
    27.                     <template slot-scope="scope">
    28.                         <div slot="reference" class="name-wrapper">
    29.                             {{ scope.row.name }}
    30.                         div>
    31.                     template>
    32.                 el-table-column>
    33.                 <el-table-column prop="address" label="地址">
    34.                     <template slot-scope="scope">
    35.                         <span style="margin-left: 10px">{{ scope.row.address }}span>
    36.                     template>
    37.                 el-table-column>
    38.                 <el-table-column label="操作">
    39.                     <template slot-scope="scope">
    40.                         <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="info">编辑el-button>
    41.                         <el-button size="mini" type="danger"
    42.                             @click="handleDelete(scope.$index, scope.row)">删除el-button>
    43.                     template>
    44.                 el-table-column>
    45.             el-table>
    46.         template>
    47.  
    48.         <div class="block">
    49.             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    50.                 :current-page="currentPage4" 
    51.                 :page-sizes="[10, 20, 30, 40]" 
    52.                 :page-size="100"
    53.                 layout="total, sizes, prev, pager, next, jumper" 
    54.                 :total="40">
    55.             el-pagination>
    56.         div>
    57.     div>
    58.     <script>
    59.         new Vue({
    60.             el: "#app",
    61.             data: {
    62.                 currentPage1: 5,
    63.                 currentPage2: 5,
    64.                 currentPage3: 5,
    65.                 currentPage4: 1,
    66.                 tableData: [{
    67.                     date: '2016-05-02',
    68.                     name: '王小虎',
    69.                     address: '上海市普陀区金沙江路 1518 弄'
    70.                 }, {
    71.                     date: '2016-05-04',
    72.                     name: '王小虎',
    73.                     address: '上海市普陀区金沙江路 1517 弄'
    74.                 }, {
    75.                     date: '2016-05-01',
    76.                     name: '王小虎',
    77.                     address: '上海市普陀区金沙江路 1519 弄'
    78.                 }, {
    79.                     date: '2016-05-03',
    80.                     name: '王小虎',
    81.                     address: '上海市普陀区金沙江路 1516 弄'
    82.                 }]
    83.             },
    84.             methods: {
    85.                 handleEdit(index, row) {
    86.                     console.log(index, row);
    87.                 },
    88.                 handleDelete(index, row) {
    89.                     console.log(index, row);
    90.                 },
    91.                 handleSizeChange(val) {
    92.                     console.log(`每页 ${val} 条`);
    93.                 },
    94.                 handleCurrentChange(val) {
    95.                     console.log(`当前页: ${val}`);
    96.                 }
    97.             }
    98.         });
    99.     script>
    100. body>
    101.  
    102. html>
    1. html>
    2. <html lang="en" style="height: 100%;">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="cdn.jsdelivr.net_npm_vue@2_dist_vue.js">script>
    9.     <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js">script>
    10.     
    11.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    12.     
    13.     <script src="https://unpkg.com/element-ui/lib/index.js">script>
    14.  
    15.     <style>
    16.         .el-header,
    17.         .el-footer {
    18.             background-color: #B3C0D1;
    19.             color: #333;
    20.             text-align: center;
    21.             line-height: 60px;
    22.         }
    23.  
    24.         .el-aside {
    25.             background-color: #D3DCE6;
    26.             color: #333;
    27.             text-align: center;
    28.             line-height: 200px;
    29.         }
    30.  
    31.         .el-main {
    32.             background-color: #E9EEF3;
    33.             color: #333;
    34.             text-align: center;
    35.             line-height: 160px;
    36.         }
    37.  
    38.         body>.el-container {
    39.             margin-bottom: 40px;
    40.         }
    41.  
    42.         .el-container:nth-child(5) .el-aside,
    43.         .el-container:nth-child(6) .el-aside {
    44.             line-height: 260px;
    45.         }
    46.  
    47.         .el-container:nth-child(7) .el-aside {
    48.             line-height: 320px;
    49.         }
    50.     style>
    51. head>
    52.  
    53. <body style="height: 100%; overflow: hidden;">
    54.     <div id="app" style="height: 100%;">
    55.         <el-container style="height: 100%;">
    56.             <el-header>Headerel-header>
    57.             <el-container>
    58.                 <el-aside>
    59.                     <el-menu background-color="#D3DCE6" text-color="#333">
    60.                         <el-submenu index="1">
    61.                             <template>
    62.                                 <span slot="title">导航一span>
    63.                             template>
    64.                             <el-menu-item index="1-1">
    65.                                 <a href="index.html" target="right">1-1a>el-menu-item>
    66.                             <el-menu-item index="1-2">
    67.                                 <a href="index.html" target="right">1-2a>el-menu-item>
    68.                             <el-menu-item index="1-3">
    69.                                 <a href="index.html" target="right">1-3a>el-menu-item>
    70.                         el-submenu>
    71.                         <el-menu-item index="2">
    72.                             <span slot="title">导航二span>
    73.                         el-menu-item>
    74.                         <el-submenu index="3">
    75.                             <template>
    76.                                 <span slot="title">导航三span>
    77.                             template>
    78.                             <el-menu-item index="3-1">3-1el-menu-item>
    79.                             <el-menu-item index="3-2">3-2el-menu-item>
    80.                             <el-menu-item index="3-3">3-3el-menu-item>
    81.                         el-submenu>
    82.                     el-menu>
    83.                 el-aside>
    84.                 <el-container>
    85.                     <el-main style="overflow: hidden;">
    86.                         <iframe name="right" width="100%" height="100%" frameborder="0">
    87.                         iframe>
    88.                     el-main>
    89.                 el-container>
    90.             el-container>
    91.             <el-footer>Footerel-footer>
    92.         el-container>
    93.     div>
    94.     <script>
    95.         new Vue({
    96.             el: "#app",
    97.             data: {
    98.  
    99.             },
    100.             methods: {
    101.  
    102.             }
    103.         });
    104.     script>
    105. body>
    106.  
    107. html>

  • 相关阅读:
    改进 hibernate-validator，新一代校验框架 validator 使用介绍 v0.4
    Java入门------数组
    Java面试题(持续更新中)
    Linux——文件权限属性和权限管理
    unity官方教程 -- Hi Shader学习笔记 Chapter 1
    react学习随笔
    基于粒子群优化算法的BP神经网络预测模型（Matlab代码实现）
    算法通关村第17关【白银】| 贪心高频问题
    G882磁力仪拖鱼位置是如何计算的？
    9.28栈、队列&状态压缩&双向搜索
  • 原文地址：https://blog.csdn.net/weixin_62971115/article/details/132722566