element元件table表頭\n換行

在項目中，我們有時候需要像上面截圖這樣，表頭需要兩行的樣式，可能你們不需要，但是我用到了，這裡記錄一下，當是自己的一個筆記。

<el-table :data="list" tooltip-effect="dark">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="訂單号">
          <template slot-scope="scope">{{scope.row.masterOrderNo}}</template>
        </el-table-column>
        <el-table-column label="吾日" prop></el-table-column>
        <el-table-column label="三省" prop></el-table-column>
        <el-table-column label="吾身" prop></el-table-column>
        <el-table-column :label="'早上吃啥 \n 豆漿 | 流沙包'" prop></el-table-column>
        <el-table-column :label="'中午吃啥 \n 蛋炒飯 | 白開水'" prop></el-table-column>
        <el-table-column :label="'晚上吃啥 \n 沒錢減減肥吧'" prop></el-table-column>
        <el-table-column label="訂單類型" prop></el-table-column>
        <el-table-column :label="'貨期\n(天數)'" prop></el-table-column>
        <el-table-column label="報價狀态" prop="orderStatus"></el-table-column>
        <el-table-column label="收款狀态" prop></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <i
              class="iconfont iconfont-table icon-dingdan2"
              @click="seeDetail(scope.row.supplierId)"
            ></i>
            <i class="iconfont iconfont-table icon-bianji" @click="edit(scope.row.supplierId)"></i>
            <i
              class="iconfont iconfont-table icon-icon7"
              @click="delSupplier(scope.row.supplierId)"
            ></i>
          </template>
        </el-table-column>
</el-table>

           

主要就是在需要換行的地方加上一個\n，但是…你會發現加完并沒有效果（有效果估計是你走運…）

還得給.cell加樣式，這樣就perfect了

要注意的是，用element寫項目的話，最好是直接開一個element.css/element.scss，把對element的樣式修改全部寫到這個檔案裡面，直接在main.js裡面去引入，而不要選擇在元件裡面去修改element的樣式，因為我們元件裡面的樣式很多時候會用到scope，有時候在裡面修改element的樣式會起不了作用。

學會讓自己開心很重要，記得對自己好一點，開心一點。