Vue

by easeava

HTML

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://vue-sku.ease.smhx.net/sku.umd.min.js"></script>
<link rel="stylesheet" href="https://vue-sku.ease.smhx.net/sku.css">

<div id="app">
    <div class="container">
      <vue-sku
        v-model="value"
        action="http://localhost:8081/index.php"
        :sku-tree="skuTree"
        :on-fetch-group="fetchSkuTree"
        :on-fetch-sku="fetchSku"
        :on-create-group="createGroup"
        :on-create-sku="createSku"
        @on-change="change"></vue-sku>
        <sku-table :data="value" :flatten="flatten" @on-change-data="handleChangeData"></sku-table>
      <br>
      <small>规格组合
        <pre>{{value}}</pre>
      </small>
      <small>表格组合
        <pre>{{data}}</pre>
      </small>
    </div>
  </div>

SCSS

html, body {
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  justify-content: center;
  padding-top: 20px;

  .container {
    width: 1000px;
  }
}

Vue

const skuTree = [
  {
    id: 10740,
    text: '颜色'
  },
  {
    id: 40732,
    text: '尺寸'
  }
]

const sku = [
  {
    id: 3,
    text: '蓝色'
  },
  {
    id: 10,
    text: '红色'
  },
  {
    id: 30,
    text: '土豪金'
  },
  {
    id: 137,
    text: '黑色'
  },
  {
    id: 138,
    text: '灰色'
  },
  {
    id: 121,
    text: 'xxl'
  },
  {
    id: 94,
    text: 'xxxl'
  }
]

new Vue({
  el: "#app",
  data () {
    return {
      value: [
        {
          'id': 10740,
          'text': '颜色',
          'leaf': [
            {
              'id': 3,
              'text': '蓝色',
              'is_show': false
            },
            {
              'id': 10,
              'text': '红色',
              'is_show': false
            }
          ]
        },
        {
          'id': 40732,
          'text': '尺寸',
          'leaf': [
            {
              'id': 121,
              'text': 'xxl',
              'is_show': false
            },
            {
              'id': 94,
              'text': 'xxxl',
              'is_show': false
            }
          ]
        }
      ],
      skuTree,
      data: [],
      flatten: [
        {
          'skus': [
            {
              'k_id': 10740,
              'k': '颜色',
              'v_id': 3,
              'v': '蓝色'
            },
            {
              'k_id': 40732,
              'k': '尺寸',
              'v_id': 121,
              'v': 'xxl'
            }
          ],
          'price': 222222,
          'stock': 12222,
          'marked_price': 12312
        },
        {
          'skus': [
            {
              'k_id': 10740,
              'k': '颜色',
              'v_id': 3,
              'v': '蓝色'
            },
            {
              'k_id': 40732,
              'k': '尺寸',
              'v_id': 94,
              'v': 'xxxl'
            }
          ],
          'price': 233333,
          'stock': 222222,
          'marked_price': 111111
        },
        {
          'skus': [
            {
...