element-ui表格數據爲空及數據使用html包裹的實現

先上兩張設計圖

 

 

代碼實現：

<el-table :data="recordLists" stripe style="width: 100%">
          <el-table-column prop="created" label="時間"></el-table-column>
          <el-table-column prop="productname" label="交易"></el-table-column>
          <el-table-column label="金額（元）">
            <template slot-scope="scope">
              <span class="red" v-if="scope.row.status==2 && scope.row.direction"><b> {{ scope.row.tranamount }} </b></span>
              <span class="green" v-else-if="scope.row.status==2 && !scope.row.direction"><b> {{ scope.row.tranamount }} </b></span>
              <span v-else><b> {{ scope.row.tranamount }} </b></span>
            </template>
          </el-table-column>
          <el-table-column prop="statustext" label="狀態"></el-table-column>
          <div slot="empty">
            <div>
              <img src="../../assets/pcpay/no_record_pic.png" alt="" width="140" height="140" />
            </div>
            <p :style="{'marginTop': '23px'}">未查詢到您的交易記錄</p>
          </div>
</el-table>

 recordLists爲後端拿到的數據