在iview的table中使用模板
在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', }, ],
漫思