Elenment：导航栏+侧边栏+基础表格

来自CloudWiki
跳转至： 导航， 搜索

网页布局

效果图

Vue2022071607.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE第一个案例-helloWorld</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

	<!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">

</style>

</head>

<body>
    <div id="app">

		<el-row style="height: 100px;background-color: yellow;"></el-row>
		<el-row class="tac">
			<el-col :span="6" style="height: 500px;background-color: aqua;"></el-col>
			<el-col :span="18" style="height: 500px; background-color:green;"></el-col>
		</el-row>
	 
	  
   </div>
	

 
<script>
        new Vue({
            el: '#app',
           
			data() {
			  return {

			  }
			},
	
			methods: {

			}
        })
		

    </script>
</body>
</html>

添加表格

示意图

Vue2022071608.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE第一个案例-helloWorld</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

	<!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">

</style>

</head>

<body>
    <div id="app">
        <!-- 导航栏 -->
<!--        -->
		<el-row >
			<el-menu
			          :default-active="activeIndex2"
			          class="el-menu-demo"
			          mode="horizontal"
			          @select="handleSelect"
			          background-color="#545c64"
			          text-color="#fff"
			          active-text-color="#ffd04b">
			          <el-menu-item index="1">处理中心</el-menu-item>
			          <el-submenu index="2">
			            <template slot="title">我的工作台</template>
			            <el-menu-item index="2-1">选项1</el-menu-item>
			            <el-menu-item index="2-2">选项2</el-menu-item>
			            <el-menu-item index="2-3">选项3</el-menu-item>
			            <el-submenu index="2-4">
			              <template slot="title">选项4</template>
			              <el-menu-item index="2-4-1">选项1</el-menu-item>
			              <el-menu-item index="2-4-2">选项2</el-menu-item>
			              <el-menu-item index="2-4-3">选项3</el-menu-item>
			            </el-submenu>
			          </el-submenu>
			          <el-menu-item index="3" disabled>消息中心</el-menu-item>
			          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
			        </el-menu>
		</el-row>
		<el-row class="tac">
			<el-col :span="6" style="height: 500px;background-color: aqua;">
				
			</el-col>
			<el-col :span="18" style="height: 500px; background-color:green;">
				<template>
					<el-table
						:data="tableData"
						style="width: 100%">
						<el-table-column
						  prop="date"
						  label="日期"
						  width="180">
						</el-table-column>
						<el-table-column
						  prop="name"
						  label="姓名"
						  width="180">
						</el-table-column>
						<el-table-column
						  prop="address"
						  label="地址">
						</el-table-column>
					  </el-table>
				</template>
			</el-col>
		</el-row>
	  
	  </div>
	

 
<script>
        new Vue({
            el: '#app',
           
			data() {
			  return {
				activeIndex: '1',
				activeIndex2: '1',
			    tableData: [{
			      date: '2016-05-02',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1518 弄'
			    }, {
			      date: '2016-05-04',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1517 弄'
			    }, {
			      date: '2016-05-01',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1519 弄'
			    }, {
			      date: '2016-05-03',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1516 弄'
			    }]
			  }
			},
	
			methods: {
				handleSelect(key, keyPath) {
				  console.log(key, keyPath);
				},
			  handleOpen(key, keyPath) {
			    console.log(key, keyPath);
			  },
			  handleClose(key, keyPath) {
			    console.log(key, keyPath);
			  }
			}
        })
		

    </script>
</body>
</html>

添加侧边栏

效果图

Vue2022071609.png

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE第一个案例-helloWorld</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

	<!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">

</style>

</head>

<body>
    <div id="app">
        <!-- 导航栏 -->
<!--        -->
		<el-row >
			<el-menu
			          :default-active="activeIndex2"
			          class="el-menu-demo"
			          mode="horizontal"
			          @select="handleSelect"
			          background-color="#545c64"
			          text-color="#fff"
			          active-text-color="#ffd04b">
			          <el-menu-item index="1">处理中心</el-menu-item>
			          <el-submenu index="2">
			            <template slot="title">我的工作台</template>
			            <el-menu-item index="2-1">选项1</el-menu-item>
			            <el-menu-item index="2-2">选项2</el-menu-item>
			            <el-menu-item index="2-3">选项3</el-menu-item>
			            <el-submenu index="2-4">
			              <template slot="title">选项4</template>
			              <el-menu-item index="2-4-1">选项1</el-menu-item>
			              <el-menu-item index="2-4-2">选项2</el-menu-item>
			              <el-menu-item index="2-4-3">选项3</el-menu-item>
			            </el-submenu>
			          </el-submenu>
			          <el-menu-item index="3" disabled>消息中心</el-menu-item>
			          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
			        </el-menu>
		</el-row>
		<el-row class="tac">
			<el-col :span="6" >
				
				    <el-menu
				      default-active="2"
				      class="el-menu-vertical-demo"
				      @open="handleOpen"
				      @close="handleClose"
				      background-color="#545c64"
				      text-color="#fff"
				      active-text-color="#ffd04b">
				      <el-submenu index="1">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>导航一</span>
				        </template>
				        <el-menu-item-group>
				          <template slot="title">分组一</template>
				          <el-menu-item index="1-1">选项1</el-menu-item>
				          <el-menu-item index="1-2">选项2</el-menu-item>
				        </el-menu-item-group>
				        <el-menu-item-group title="分组2">
				          <el-menu-item index="1-3">选项3</el-menu-item>
				        </el-menu-item-group>
				        <el-submenu index="1-4">
				          <template slot="title">选项4</template>
				          <el-menu-item index="1-4-1">选项1</el-menu-item>
				        </el-submenu>
				      </el-submenu>
				      <el-menu-item index="2">
				        <i class="el-icon-menu"></i>
				        <span slot="title">导航二</span>
				      </el-menu-item>
				      <el-menu-item index="3" disabled>
				        <i class="el-icon-document"></i>
				        <span slot="title">导航三</span>
				      </el-menu-item>
				      <el-menu-item index="4">
				        <i class="el-icon-setting"></i>
				        <span slot="title">导航四</span>
				      </el-menu-item>
				    </el-menu>
			</el-col>
			<el-col :span="18" >
				<template>
					<el-table
						:data="tableData"
						style="width: 100%">
						<el-table-column
						  prop="date"
						  label="日期"
						  width="180">
						</el-table-column>
						<el-table-column
						  prop="name"
						  label="姓名"
						  width="180">
						</el-table-column>
						<el-table-column
						  prop="address"
						  label="地址">
						</el-table-column>
					  </el-table>
				</template>
			</el-col>
		</el-row>
	  
	  </div>
	

 
<script>
        new Vue({
            el: '#app',
           
			data() {
			  return {
				activeIndex: '1',
				activeIndex2: '1',
			    tableData: [{
			      date: '2016-05-02',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1518 弄'
			    }, {
			      date: '2016-05-04',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1517 弄'
			    }, {
			      date: '2016-05-01',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1519 弄'
			    }, {
			      date: '2016-05-03',
			      name: '王小虎',
			      address: '上海市普陀区金沙江路 1516 弄'
			    }]
			  }
			},
	
			methods: {
				handleSelect(key, keyPath) {
				  console.log(key, keyPath);
				},
			  handleOpen(key, keyPath) {
			    console.log(key, keyPath);
			  },
			  handleClose(key, keyPath) {
			    console.log(key, keyPath);
			  }
			}
        })
		

    </script>
</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Elenment：导航栏%2B侧边栏%2B基础表格&oldid=31081”