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的样式会起不了作用。

学会让自己开心很重要，记得对自己好一点，开心一点。