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,便可实现