element组件库等组件简单介绍

日历组件

    使用具名插槽和作用域插槽可以自定义内容
  <el-calendar>
            <template
              slot="dateCell"
              slot-scope="{date}"
            >
              <div class="date-content">
                <span class="text">
                  {{ new Date(date).getDate() }}
                </span>
                <span v-if="showRest(date)" class="rest">休</span>

              </div>
            </template>
          </el-calendar>

下拉菜单组件

点击菜单项后会触发@command事件，可以获取command属性的值 
 <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right" />
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="a">黄金糕</el-dropdown-item>
      <el-dropdown-item command="b">狮子头</el-dropdown-item>
      <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
      <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
      <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  -----------------
  methods: {
    changeLanguage(command) {
      console.log(command) 点击菜单项获取不同的值  //a,b,c,d,e
    }
  }

image图片

可以自适应容器的大小

dialog

close-on-click-modal   是否可以通过点击页面空白处关闭Dialog  默认 true 
close-on-press-escape  是否可以通过按下ESC关闭Dialog   默认 true 
closed  Dialog 关闭动画结束时的回调 可以关闭弹框时做一些事情 比如重发ajax获取新页面

table

表格排序
<!-- 1.定义需要根据字段排序的字段名称 -->

<el-table :data="list" border :default-sort="{prop: 'workNumber'}">
</el-table>

<!-- 2.保证字段列上声明了prop属性 和 sortable属性 -->

<el-table-column label="入职时间" sortable prop="timeOfEntry">
</el-table-column>

table序号适应分页
 <el-table-column
                label="序号"
                width="120"
                type="index"
                :index="typeIndex"
              />

 typeIndex(index) {
      let curpage = this.pageParams.page
      const limitpage = this.pageParams.pagesize
      curpage = curpage >= 1 ? curpage : 1
      return index + 1 + (curpage - 1) * limitpage
    },

作用域列和自定义插槽

pagination分页

<el-pagination
                :page-sizes="[5,7,10,20]"
                :total="total"   总条数
                :current-page.sync="curPage"    如果不点击页码可以手动设置页码值
                :page-size="pageParams.pagesize"   每页几条数据
                layout="sizes,prev,pager,next,jumper"
                @current-change="hCurrentChange"   点击的页码值
                @size-change="hSizeChange"      
              />