headerbodydata v1.0.3

headerbodydata

基于 Element UI 的订单头体数据展示组件

使用方法

npm i headerbodydata -D

main.js 中

import Vue from 'vue';
import OrderHeadbody from 'headerbodydata'
Vue.use(OrderHeadbody)

组件调用

<OrderHeadbody
      :topdata='tableData.topdata'
      :bodycolunm='bodycolunm'
      :bodydata='tableData.bodydata'
    ></OrderHeadbody>

模拟数据

export default {
  data() {
    return {
      tableData: {},
      bodycolunm: [
        {
          prop: 'number',
          label: '订单编号',
          width: '300'
        },
        {
          prop: 'productname',
          label: '订单名称',
          width: '200'
        },
        {
          prop: 'company',
          label: '公司名称',
          width: '200'
        },
        {
          prop: 'site',
          label: '地点',
          width: '100'
        },
        {
          prop: 'product',
          label: '商品',
          width: '200'
        },
        {
          prop: 'producttype',
          label: '商品类别',
          width: '100'
        },
        {
          prop: 'count',
          label: '数量',
          width: '100'
        },
        {
          prop: 'price',
          label: '价格',
          width: '100'
        },
        {
          prop: 'date',
          label: '日期',
          width: '200'
        },
        {
          prop: 'legalperson',
          label: '法人',
          width: '100'
        },
        {
          prop: 'ratify',
          label: '批准通过',
          width: '100'
        }
      ]
    };
  }
  created: function() {
    fetch('http://rap2api.taobao.org/app/mock/161472/orderHeaderBody')
      .then(response => response.json())
      .then(data => (this.tableData = data))
      .catch(e => console.log('Oops, error', e));
  },
}