element-ui的el-table的注意事项

el-table引入日历如何定义时间格式

format=“yyyy年MM月dd日”
value-format=“yyyy年MM月dd日”
这两行便可定义时间格式，以及输出形式
endTime输出形式就会变成yyyy年MM月dd日

<el-date-picker
      class="Tosmall"
      v-model="endTime"
      type="date"
      placeholder="选择日期"
      format="yyyy年MM月dd日"
      value-format="yyyy年MM月dd日">
    </el-date-picker>

el-table的sortable排序混乱的

加上 :sort-method="(a,b)=>{return a.mount - b.mount}" 便可正确的排序

<el-table-column
      prop="mount"
      label="打卡次数"
      min-width="120"
       sortable 
      :sort-method="(a,b)=>{return a.mount - b.mount}" 
      >

el-steps

效果图

实现点击之后才变蓝

需要将@click变成@click.native才有效

<el-steps else="this.row.works"  class="changeStep " direction='vertical' :active="active" align-center>
  <el-step v-for="(step,index) in this.work" 
        :key="index" 
        :icon="icon[index]"
        :description="`${step.usstation}`"
        :title="`${step.ustime}`"
        @click.native="next(index+1)"
        >
        </el-step>
</el-steps>

定义数据、方法

data () {
     return {
         work:[
             {
                 ustime:"2020年10月12日",
                 usstation:"钟海楼"
             },
             {
                 ustime:"2020年9月26日",
                 usstation:"主楼"
             },
             {
                 ustime:"2020年10月12日",
                 usstation:"二教"
             },
             {
                 ustime:"2020年10月12日",
                 usstation:"二教"
             },
             {
                 ustime:"2020年10月12日",
                 usstation:"二教"
             },
             {
                 ustime:"2020年10月12日",
                 usstation:"二教"
             },
             {
                 ustime:"2020年10月12日",
                 usstation:"钟海楼"
             },
             
             
         ],
         active:1,
         icon:[" ","el-icon-time","el-icon-map-location","el-icon-odometer","el-icon-school","el-icon-office-building","el-icon-time","el-icon-map-location","el-icon-odometer","el-icon-school","el-icon-office-building"]
     }
  methods: {
  //点击之后索引+1
       next(rowNum){
           this.active=rowNum
          //  console.log("rowNum",rowNum);
       }
   },

如何引入头像放到第一位

之后将avatar的positin变成relative，设置top与left让它覆盖第一个圆圈

<el-avatar class="avatar" size="medium" src="http://img.touxiangzhan.com/upload/image/2a1003364498n2136485952t26.jpg"></el-avatar>

固定表头

只要在el-table元素中定义了height,便可实现