vue+elemnt细节整理篇(遇坑总结)

1.首先我们要谈的是el-table和slot-scope="scope"


	
	
	  
    

el-table是elmentUI中用的最多的组件元素之一,他的出来都是嵌套el-table-column的,其中dataList是数组的数据源,dataList的length决定了el-table的行数,el-table-column的个数决定了el-table的列数。border是决定表格的表格的边框,row-click表示当某一行被点击时触发该事件。prop代表取出key(比如plantname)对应的数据dataList["key"],label表示表头显示的内容。show-overflow-tooltip表示当内容过长被隐藏时显示 tooltip。这些其实如果不明白可以去查官方文档,请点击el-table。slot-scope="scope"原理就是利用插槽填充需要填充的数据,上面的streetaddress 、province 、city 等都是同级别的,vue的插槽。

2.关于el-dialog的title中拼接字符串和全局变量:

/**
*template部分
*/


//js部分

3.两个el-date-picker中双向绑定的日期( format="yyyy-MM-dd"  value-format="yyyy-MM-dd")怎么比较大小?

js中比较日期的方式转成时间戳再比较大小!

let oDate1 = new Date("2020-07-28"),oDate2 = new Date("2020-07-25");
if (oDate1.getTime() > oDate2.getTime()) {
    this.$message.error("请注意:结束日期不能小于起始日期!");
   return false;
}else{
    this.$message.error("结束日期大于起始日期!");
}

//封装一下:里面看你需要做什么
export function timeTmp(data1,date2){
    let oDate1 = new Date(data1),oDate2 = new Date(date2);
    if (oDate1.getTime() > oDate2.getTime()) {
       this.$message.error("请注意:结束日期不能小于起始日期!");
    }else{
       this.$message.error("结束日期大于起始日期!");
    }
}

 

你可能感兴趣的:(VUE,Element,UI)