關於element table那些隱藏的功能，技術提升請來！

1、第一個就是表格頭部與內容對不齊的問題了，一直以來都感覺他不算啥大問題，關鍵是測試還沒測出來，但是完美主義者還是想改，哈哈。

在App.vue文件中加入：

 body .el-table th.gutter{
display: table-cell!important;
}

完美解決。

2、不知道有沒有爲了表格內容過長佔地兒苦惱，有個超簡代碼來解決：

<el-table border :data="historyData">
            <template slot="empty">
             <p>{{dataText}}</p> 
            </template>
            <el-table-column prop="areaName" label="所在行政區">
            </el-table-column>
            <el-table-column prop="num" label="企業編號" width="90" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="name" label="企業名稱" width="90" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="企業地址" width="90" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="linkMan" label="聯繫人" width="70">
            </el-table-column>
            <el-table-column prop="phone" label="移動電話" width="120">
            </el-table-column>
            <el-table-column label="標籤" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="item in scope.row.tagList">
                  {{item.name}}，
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="telephone" label="固定電話" width="90">
            </el-table-column>
            <el-table-column label="狀態" width="60">
              <template slot-scope="scope">
                <div v-if="scope.row.status==0">啓用</div>
                <div v-if="scope.row.status==1">停用</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="270">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status==1" icon="el-icon-s-check" @click="handleStop(scope.row)" type="text"
                  size="small">啓用</el-button>
                <el-button v-if="scope.row.status==0" icon="el-icon-s-check" @click="handleStop(scope.row)" type="text"
                  size="small" class="btncolor">停用</el-button>
                <el-button icon="el-icon-edit" @click="changeSourceOfPPage(scope.row)" type="text">編輯</el-button>
                <el-button v-if="scope.row.outletList.length == 0" icon="el-icon-delete" @click="handleDelete(scope.row)" type="text" style="color:red">刪除
                </el-button>
                <el-button v-if="scope.row.outletList.length!= 0" icon="el-icon-delete" @click="handleDelete2(scope.row)" type="text" style="color:red">刪除
                </el-button>
                <el-button icon="el-icon-info" @click="addTag(scope.row)" type="text" style="color:#FFB427">設置標籤</el-button>
              </template>
            </el-table-column>
          </el-table>

找到它了嗎？ 每錯就是 show-overflow-tooltip ！

效果圖來一張：

3、有沒有發現上面的表格代碼多了個東西

<template slot="empty">

             <p>{{dataText}}</p> 

 </template>

 element表格加載開始時總會彈出 '暫無數據' ,爲了避免這個問題，有個解決辦法

• 表格中加入以上代碼

• data() {

        return {

          dataText: "",//表格開始置空}}

4、變化的表頭1

<el-table border :data="historyData">
          <template slot="empty">
             <p>{{dataText}}</p>
            </template>
          <el-table-column prop="monitorDate" label="時間" width="190">
          </el-table-column>
          <el-table-column prop="outletName" label="排口名稱">
          </el-table-column>
          <el-table-column prop="outletTag" label="排口標籤" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-for="(i,index) in headerData1" :key="index">
            <template slot="header" slot-scope="scope">
              {{i}}({{headerData2[index]}})
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.value[index]!=''">{{scope.row.value[index]}}({{scope.row.flag[index]}})</span>
            </template>
          </el-table-column>
        </el-table>

 5、變化的表頭2：

第一個接口獲取表頭

第二個接口通過表頭名字得到值

一切都是element自動處理，厲害了！

 

 效果圖：

有用就點個贊再走吧！