饿了么表格封装！！

菜鸟前端实时记录

每次写完的代码过段时间就会忘 在这里记录下给表格加上width100% 当内容超出时就会有x轴滚动条 每次都忘 每次都百度 

ps：外层盒子没有overflow:hidden的情况下

             <el-table
                v-if="activeName == 'third'"
                :data="planData"
                :height="`calc(100vh - 450px)`"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ textAlign: 'center' }"
                border
                v-loading="loading"
                width="100%"
              >
                <template v-for="col in columns">
                  <el-table-column
                    :key="col.prop"
                    :prop="col.prop"
                    :label="col.label()"
                    v-if="col.show()"
                    :width="col.width"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <template v-if="col.prop == 'advertiser_name'">
                        <div
                          style="width: 100%;overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;"
                        >
                          <span style="color: #338aff;" @click="jump(scope.row)">{{
                            scope.row.advertiser_name
                          }}</span
                          ><br />
                          <span>(账户ID：{{ scope.row.advertiser_id }})</span>
                        </div>
                      </template>
                      <template v-else-if="col.prop === 'ad_create_time'">
                        <div style="width: 100%; text-align: center;">
                          {{ scope.row.ad_create_time | dateFormat }}
                        </div>
                      </template>
                      <template v-else-if="col.prop === 'cost'">
                        <div style="width: 100%; text-align: center;">
                          ￥{{ scope.row.cost | homeSplit }}
                        </div>
                      </template>
                      <template v-else>
                        <span v-text="scope.row[col.prop]"></span>
                      </template>
                    </template>
                  </el-table-column>
                </template>
              </el-table>

    columns: [
        {
          label: _ => '广告账户名称',
          prop: 'advertiser_name',
          show: _ => true,
          sort: true,
          width: 350
        },
        {
          label: _ => '广告ID',
          prop: 'promotion_id',
          show: _ => true,
          sort: true,
          width: 250
        },
        {
          label: _ => '项目ID',
          prop: 'project_id',
          show: _ => true,
          sort: true,
          width: 250
        },
        {
          label: _ => '投手',
          prop: 'user_name',
          show: _ => true,
          sort: true
        },
        {
          label: _ => '素材消耗',
          prop: 'cost',
          show: _ => true,
          sort: true
        },
        {
          label: _ => '实际投放天数',
          prop: 'day_count',
          show: _ => true,
          sort: true,
          width: 150
        },
        {
          label: _ => '广告搭建时间',
          prop: 'ad_create_time',
          show: _ => true,
          sort: true,
          width: 150
        }
      ],