Vue element-UI开发学习---单一页面学习

admin · 发表于 2019-3-18 15:13:56

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

您需要登录才可以下载或查看，没有账号？注册

×

Vue element-UI开发学习---单一页面学习

捕获11.JPG

<template>
  <div id="app">

<el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  menu-trigger="hover">
<el-menu-item index="1">Data View</el-menu-item>
<el-submenu index="2">
   <template slot="title">Data XX</template>
   <ElMenuItem index="2-1">TC Data Collection</ElMenuItem>
   <ElMenuItem index="2-2">XX Data Collection</ElMenuItem>
   <ElMenuItem index="2-3">XX Data Collection</ElMenuItem>
   <ElMenuItem index="2-4">XX Data Collection</ElMenuItem>
</el-submenu>
<el-menu-item index="3"><a :href="url" target="_blank">About Us</a></el-menu-item>
</el-menu>


<br>
<el-row>
  <ElCol :span="6" class="grid">
<el-input v-model="input" placeholder="please input the value" ></el-input>
  </ElCol>
  <ElCol :span="2" class="grid">
<el-button type="success" icon="el-icon-search" >Search</el-button>
  </ElCol>
</el-row>
<br>


<el-table
:data="tableData"
style="width:100%"
stripe
>
<el-table-column fixed label="Date"  prop="date"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Address"  prop="address"></el-table-column>
<el-table-column align="right">
<template slot="header">
<el-input v-model="search" placeholder="please input the keywords"></el-input>
</template>
</el-table-column>

<el-table-column>
<template >
  <el-button  type="primary" icon="el-icon-edit">Edit</el-button>
  <el-button  type="danger" icon="el-icon-delete">Delete</el-button>
</template>
</el-table-column>
</el-table>

<br>

<el-row>
  <ElCol :span="1" class="grid">
<el-tooltip effect="dark" content="Add new information" placement="top-start">
<el-button type="primary" icon="el-icon-circle-plus-outline">Add</el-button>
   </el-tooltip>
  </ElCol>

  <ElCol :span="1" :offset="1" class="grid">
   <el-tooltip effect="dark" content="Delete All The Information" placement="top-start">
   <el-button type="danger" icon="el-icon-delete">Delete All</el-button>
   </el-tooltip>
  </ElCol>

</el-row>


<br>

<el-pagination background
  :total="1000"
  layout="prev,pager,next">
</el-pagination>

</div>
</template>

<script>

export default {
  name: 'app',
  data(){
return {
   activeIndex: '2',
   url:"http://baidu.com",
   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 弄'
      }]
}
  }
}
</script>

<style>
  #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
}
</style>

[开发视频] Vue element-UI开发学习---单一页面学习

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！