技術標籤：Vue

使用插槽，直接插入新的列，不可能通過表單統一的設定來實現這樣的效果的，本來我是準備資料全放在groupName屬性中的，可是不能實現省略。。。。

於是分別用三個p標籤來換行，設定樣式來實現省略，注意不要忘記el-table-column中的:show-overflow-tooltip="true" ，不然省略時不會出現提示框

<el-table-column :show-overflow-tooltip="true" 
         v-if="this.tableData[0]&&this.tableData[0].hasOwnProperty('groupName')">
        <template slot-scope="scope">
          <p v-if="scope.row.extOutput.storeName" class="tooltip">門店名稱：{{scope.row.extOutput.storeName}}</p>
          <p v-if="scope.row.extOutput.activityName" class="tooltip">活動名：{{scope.row.extOutput.activityName}}</p>
          <p v-if="scope.row.extOutput.commodityName" class="tooltip">商品名稱：{{scope.row.extOutput.commodityName}}</p>
        </template>
      </el-table-column>

//css
  .tooltip {
     overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;   //這裡控制超出多少行開始用省略號代替
      -webkit-box-orient: vertical;
  }
 

效果如下：

說實話一開始聽到這個需求的時候，內心：“你這是為難我胖虎.jpg”，後來插槽大法好，插槽大法秒~撒花❀❀❀°*(￣▽￣)/❀❀❀。