element

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

选中项目右键--》集成终端--》npm install element-ui@2.15.3

引入elementUI组件库

src下views下EmpView.vue:

<template>

    <div>

        <el-container style="height: 700px; border: 1px solid #eee">

            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 学习系统</el-header>

            <el-container>

                <el-aside style="width: 250px; border: 1px solid #eee">

                    <el-menu :default-openeds="['1', '3']">

                        <el-submenu index="1">

                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>

                            <el-menu-item index="1-1">

                                <router-link to="/dept">部门管理

                                </router-link>

                                </el-menu-item>

                            <el-menu-item index="1-2">

                                <router-link to="/emp">员工管理

                                </router-link>

                                </el-menu-item>

                        </el-submenu>

                    </el-menu>

                </el-aside>

                <el-main>

                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">

  <el-form-item label="姓名">

    <el-input v-model="searchForm.name" placeholder="姓名"></el-input>

  </el-form-item>

  <el-form-item label="性别">

    <el-select v-model="searchForm.gender" placeholder="性别">

      <el-option label="男" value="1"></el-option>

      <el-option label="女" value="2"></el-option>

    </el-select>

  </el-form-item>

  <el-form-item label="入职日期">

    <el-col :span="11">

        <el-date-picker

      v-model="searchForm.value"

      type="daterange"

      range-separator="至"

      start-placeholder="开始日期"

      end-placeholder="结束日期">

    </el-date-picker>

    </el-col>

  </el-form-item>

  <el-form-item>

    <el-button type="primary" @click="onSubmit">查询</el-button>

  </el-form-item>

</el-form>

                    <el-table :data="tableData" border>

                        <el-table-column prop="name" label="姓名" width="180"></el-table-column>

                        <el-table-column label="图像" width="180">

                            <template slot-scope="scope">

<img :src="scope.row" width="100px" height="70px">

                            </template>

                        </el-table-column>

                        <el-table-column  label="性别" width="140">

                            <template slot-scope="scope">

{{ scope.row.gender==1?'男':'女' }}

                            </template>

                        </el-table-column>

                        <el-table-column prop="job" label="职位" width="140"></el-table-column>

                        <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>

                        <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>

                        <el-table-column label="操作">

                            <el-button type="primary" size="mini">编辑</el-button>

                            <el-button type="danger" size="mini">删除</el-button>

                        </el-table-column>

                    </el-table>

                    <br>

                    <el-pagination background layout="total,sizes,prev, pager, next,jumper"

        @size-change="handleSizeChange"

            @current-change="handleCurrentChange"

            :total="1000">          

        </el-pagination>

               </el-main>

            </el-container>

        </el-container>

    </div>

</template>

<script>

import axios from 'axios';

export default{

data(){

return{

    tableData:[],

    searchForm:{

    name:"",

    gender:"",

    value:[]

}

}

},

methods:{

    handleSizeChange:function(val){

    alert("每页记录变化"+val)

},

handleCurrentChange:function(val){

    alert("页码发生变化"+val)

},

    onSubmit:function(){

        alert("查询数据")

    }

},

mounted(){

    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{

this.tableData=result.data.data;

    })

}

}

</script>

<style >

</style>

src下router下index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

  {

    path: '/emp',

    name: 'emp',

    component:() => import('../views/tlias/EmpView.vue')

  },

  {

    path: '/dept',

    name: 'dept',

    component: () => import('../views/tlias/DeptView.vue')

  },

{

  path: '/',

redirect:'/dept'

}

]

const router = new VueRouter({

  routes

})

export default router