elementplus查看组件代码 element组件官网

前言

好的宝子们，我们到这里对应的就是大家最喜欢的cv工程师的讲解啦，elemnet组件呢就是提前写的各种代码的综合，大家可以直接咳咳咳你懂得嘿嘿，好了，进入主题

element组件官网

Element - The world's most popular Vue UI framework 这个是对应的官网

这里就是展开之后的代码，供大家复制粘贴

element使用前讲解

首先我们需要下载，在你的脚手架项目里面打开cmd命令去执行对应的

npm install element-ui@2.15.3下载的是最新版本

之后再我们的脚手架项目里面引入对应的语句，大家也可以直接cv

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

下面我们就进行使用

---

element组件button

elemnet组件table

elemnet组件Pagination（分页）

代码的话，大家可以去搜索

element组件Dialog

element综合案例布局

我们选择对应的自己认为可以的就好

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

这样我们就先弄好了初始化header头部，aside左边，main剩下的主体

格式补充

可以看到左边下拉以及右边表格的标志

这个是对应的左边下拉选项

<el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</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">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <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-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>

<el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>

到这里我们就基本实现了对应的数据格式

数据填写

这里我们要实现的是异步交互技术，因此我们需要的是对应的安装对应的axios工具，利用cmd命令就可以啦

https://mock.apifox.cn/m1/3128855-0-default/emp/list 然后的json数据路径在此

之后我们开始利用钩子函数进行数据导入

之后我们利用对应的函数来进行转化

<template slot-scope="scope">
                <span>{{scope.row.gender == 1?'男':'女'}}</span>
      </template>

以此来获取该行下的所有的元素

同时也可以把图片路径合上

那么最后哦这个就算完成了

这个是对应的vue代码

<template>
    <div>
        <el-container style="height: 500px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246);">菜鸟小木网</el-header>
     <el-container>
      <el-aside width="230px" style="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-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">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">系统信息管理</template>
              <el-menu-item index="2-1">部门管理</el-menu-item>
              <el-menu-item index="2-2">员工管理</el-menu-item>
            </el-menu-item-group>
          </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>
        <el-date-picker
      v-model="searchform.entrydate"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
      </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 prop="image" label="图像" width="180">
            <template slot-scope="scope">
                <img :src="scope.row.image" width="100px" height="70px">
      </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="140">
            <template slot-scope="scope">
                <span>{{scope.row.gender == 1?'男':'女'}}</span>
      </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>

      <el-pagination background layout="sizes,prev, pager,next,jumper,total" 
    @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:"",
            entrydate:[]
        }
    }
   },
   methods:
   {
    onSubmit:function()
    {
        alert("查询数据")
    },
    handleSizeChange:function(val)
        {
            alert("每页记录数"+val)
        },
        handleCurrentChange:function(val)
            {
                alert("页码发生变化"+val)
            },
   },
   mounted()
   {
    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => {
        this.tableData=result.data.data;
    });
   }
}
</script>

<style>

</style>

---