vue+elemnt細節整理篇（遇坑總結）

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

<el-table :data="dataList" border @row-click="handleRow" style="width: 100%;">
    <el-table-column prop="plantname" label="站點名稱" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="province" label="站點位址" header-align="center" align="center"
:show-overflow-tooltip="true">
      <template slot-scope="scope">
        {{scope.row.streetaddress ? (scope.row.province + scope.row.city + scope.row.area +
        scope.row.streetaddress) : scope.row.area ? (scope.row.province + scope.row.city +
        scope.row.area) : scope.row.city ? (scope.row.province + scope.row.city) :         
        scope.row.province ? scope.row.province : "暫無"}}
      </template>
    </el-table-column>
</el-table>      

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部分
*/
<el-dialog 
    :title='"用能日報表--"+ valueStart' 
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
></el-dialog>

//js部分
<script>
 export default {
  data() {
    return {
      dialogVisible: false,
      valueStart: this.$getCurrentTime(0)
    }
   }
 }
</script>      

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("結束日期大于起始日期！");
    }
}