表格模板(ant)

<a-table
        :data-source="orderlist"
        :rowClassName="rowClassName"
        bordered
        :pagination="false"
        :columns="columns"
	rowKey="order_id"
      ><span
          slot="shiJan"
          slot-scope="text, record"
        >

          {{record.add_time | dateFormat}}

        </span>
        <span
          slot="action"
          slot-scope="record"
        >
          <a-button
            type="primary"
            icon="edit"
            size="small"
          ></a-button>
          <a-divider type="vertical" />
          <a-button
            type="danger"
            icon="delete"
            size="small"
            @click="removeById(record.goods_id)"
          ></a-button>

        </span>
      </a-table>
<!-- 分页区域 -->
      <a-pagination
        :current="queryInfo.pagenum"
        :pageSize="queryInfo.pagesize"
        :pageSizeOptions="['3', '4', '6', '7']"
        :total="total"
        showSizeChanger
        showQuickJumper
        :show-total="total => `共 ${total} 条`"
        @change="handleSizeChange"
        @showSizeChange="meiYeTiaoShuGaiBian"
        background
      />




columns: [
        {
          title: '#',
          customRender: (text, record, index) =>
            `${(this.queryInfo.pagenum - 1) * this.queryInfo.pagesize +
            index +
            1}`
        },
        {
          title: '商品名称',
          dataIndex: 'goods_name'
        },
        {
          title: '商品价格(元)',
          dataIndex: 'goods_price',
          width: 105
        },
        {
          title: '商品重量',
          dataIndex: 'goods_weight',
          width: 85
        },
        {
          title: '创建时间',
          dataIndex: 'add_time',
          scopedSlots: { customRender: 'shiJan' }
          // width: 85
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ]

插槽 
<span
          slot="shiJan"
          slot-scope="text, record"
        >

          {{record.add_time | dateFormat}}

        </span>
        <span
          slot="action"
          slot-scope="record"
        >
          <a-button
            type="primary"
            icon="edit"
            size="small"
          ></a-button>
          <a-divider type="vertical" />
          <a-button
            type="danger"
            icon="delete"
            size="small"
            @click="removeById(record.goods_id)"
          ></a-button>

        </span>


// 隔行变色
    rowClassName(record, index) {
      let className = 'light-row'
      if (index % 2 === 1) className = 'dark-row'
      return className
    },
.light-row {
    background-color: rgb(223, 220, 233);
  }
  .dark-row {
    background-color: rgb(245, 238, 238);
  }

// 页码 每页条数Function(page, pageSize)
    handleSizeChange(page, pageSize) {
      this.queryInfo.pagenum = page
      this.queryInfo.pagesize = pageSize
      this.getGoodList()
    },
// 改变每页条数后刷新页码和每页条数  Function(current, size)
    meiYeTiaoShuGaiBian(newcurrent, newsize) {
      this.queryInfo.pagesize = newsize
      this.queryInfo.pagenum = newcurrent
      this.getGoodList()
    },