在iview的table中使用模板
<Table border :no-data-text="nodatatxt" :loading="loadingStatus.tableLoading" stripe :columns="columns1" :data="data1" :height="tableHeight" ref="multipleTable" > <template slot-scope="{ row, index }" slot="zhuangtai"> <i-switch @on-change="change($event, row)" :value="row.releaseStatus" /> </template> <template slot-scope="{ row, index }" slot="tupian"> <img class="img" :src="row.commodityThumbnail | mypic" alt="" /> </template> <template slot-scope="{ row, index }" slot="dataSetInfo"> <div class="sanhang" :title="row.dataSetInfo"> {{row.dataSetInfo}} </div> </template> <template slot-scope="{ row, index }" slot="index">{{ setIndex(row, 1, 1, index) }}</template> <template slot-scope="{ row, index }" slot="action"> <a type="primary" size="small" style="margin-right: 15px" @click.prevent.stop="editDialog(row)" >修改</a > <a type="primary" size="small" style="margin-right: 15px" @click.prevent.stop="viewDetail(row)" >詳情頁預覽</a > <Poptip :transfer="true" confirm title="確定要刪除這條記錄嗎?" @on-ok="ok(row)" @on-cancel="cancel" > <a class="error" size="small">刪除</a> </Poptip> </template> <div slot="loading"> <div style="height: 10px; width: 200px"> <Progress></Progress> </div> </div> </Table>
代碼部分
columns1: [ { title: '商品ID', key: 'id', minWidth: 180, fixed: 'left', }, { title: '序號', slot: 'index', minWidth: 80, }, { title: '商品名稱', key: 'commodityName', minWidth: 160, }, { title: '數據集簡介', slot: 'dataSetInfo', minWidth: 300, }, { title: '圖片', slot: 'tupian', minWidth: 160, align: 'center', }, { title: '商品數量', key: 'commodityCount', minWidth: 180, }, { title: '影像模態', key: 'dep', minWidth: 160, }, { title: '數據格式', key: 'dataFormat', minWidth: 160, }, { title: '發布狀態', slot: 'zhuangtai', key: 'counter', minWidth: 180, }, { title: '時間', key: 'pushDate', minWidth: 180, }, { title: '操作', slot: 'action', minWidth: 230, align: 'center', fixed: 'right', }, ],