zoukankan      html  css  js  c++  java
  • 在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;  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',
            },
          ],
    漫思
  • 相关阅读:
    网站常见的报错
    数据库的备份与还原
    纵向tab标签切换效果
    CSS3动画 transition 过渡,宽度由中间向两边发生过渡
    移入切换图片路径;移出再切回去
    动态修改手机号
    json基本介绍及使用
    py 封装 操作json 的方法
    通过htmltestrunner模块美化报告
    记:运行测试case遇到的问题!
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/13915164.html
Copyright © 2011-2022 走看看