simonqian/dynamic-specifications-with-vue.html

## dynamic-specifications-with-vue.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>规格选择</title>
  <style>
    *,
    html,
    body,
    div,
    span,
    input,
    u {
      padding: 0;
      margin: 0;
      list-style: none;
      outline: none;
      text-decoration: none
    }

    .box {
      width: 700px;
      margin: 10px auto 20px;
    }

    .box>li {
      padding: 5px 0;
    }

    .item>* {
      display: inline-block;
      margin-right: 10px;
    }

    .list>li {
      display: inline-block;
      margin-right: 10px;
    }

    .table {
      border: 1px solid #ddd;
      border-collapse: collapse;
      border-spacing: 0;
      width: 700px;
      margin: 10px auto;
    }

    .table>thead>tr>td,
    .table>tbody>tr>td {
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 5px 8px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="checkbox">
      <ul class="box">
        <li v-for="item in data" :id="item.classId" class="item">
          <span>{{ item.className }}</span>
          <ul class="list">
            <li v-for="child in item.classList">
              <input :id="`cb-${item.classId}-${child.typeId}`" type="checkbox" :value="child.typeId" v-model="child.checked" /> {{ child.typeName }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="table">
      <table class="table">
        <thead>
          <tr>
            <td v-for="head in table.thead">{{head}}</td>
            <td v-if="table.thead.length > 0">价格</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="body in table.tbody" :id="body.data.map(b => b.typeId).join('-')">
            <td v-for="item in body.data" :id="item.typeId">{{item.typeName}}</td>
            <td v-if="table.tbody.length > 0 && table.tbody[0].data.length > 0">
              <input type="text" placeholder="价格" v-model="body.price" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
  <script type="text/javascript">
    var data = [
      {
        "classId": "1",
        "className": "气瓶规格",
        "classList": [
          {
            "typeId": "1",
            "typeName": "5kg"
          },
          {
            "typeId": "2",
            "typeName": "15kg"
          },
          {
            "typeId": "3",
            "typeName": "20kg"
          },
          {
            "typeId": "4",
            "typeName": "30kg"
          }
        ]
      },
      {
        "classId": "2",
        "className": "气瓶类型",
        "classList": [
          {
            "typeId": "1",
            "typeName": "公司瓶"
          },
          {
            "typeId": "2",
            "typeName": "客户瓶"
          }
        ]
      },
      {
        "classId": "3",
        "className": "加气类型",
        "classList": [
          {
            "typeId": "1",
            "typeName": "普通气"
          },
          {
            "typeId": "2",
            "typeName": "佳能气"
          },
          {
            "typeId": "3",
            "typeName": "丙烷"
          }
        ]
      }
    ]

    // add checked for class
    data = _.map(data, function (type) {
      var classList = _.map(type.classList, function (item) {
        item.checked = false
        return item
      })
      type.classList = classList
      return type
    })
    console.log(data)

    function cartesian() {
      return _.reduce(arguments, function (a, b) {
        return _.flatten(_.map(a, function (x) {
          return _.map(b, function (y) {
            return x.concat([y])
          })
        }), true)
      }, [[]])
    }

    var app = new Vue({
      el: '#app',
      data: {
        data: data
      },
      computed: {
        table: function () {
          var thead = _.reduce(
            _.filter(this.data, function (type) {
              return _.some(type.classList, function (item) {
                return item.checked
              })
            }),
            function (result, type) {
              result.push(type.className)
              return result
            },
            []
          )

          var classData = _.filter(
            _.map(data, function (type) {
              return _.map(_.filter(type.classList, function (item) {
                return item.checked
              }), function (item) {
                return {
                  typeId: item.typeId,
                  typeName: item.typeName,
                }
              })
            }),
            function (type) {
              return type.length > 0
            }
          )
          var tbody = cartesian(...classData)
          tbody = _.map(tbody, function (body) {
            return {
              data: body,
              price: 0  // 设置初始价格0
            }
          })

          console.log('thead', thead)
          console.log('tbody', tbody)
          return {
            thead: thead,
            tbody: tbody
          }
        }
      }
    })
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>规格选择</title>
	<style>
	*,
	html,
	body,
	div,
	span,
	input,
	u {
	padding: 0;
	margin: 0;
	list-style: none;
	outline: none;
	text-decoration: none
	}

	.box {
	width: 700px;
	margin: 10px auto 20px;
	}

	.box>li {
	padding: 5px 0;
	}

	.item>* {
	display: inline-block;
	margin-right: 10px;
	}

	.list>li {
	display: inline-block;
	margin-right: 10px;
	}

	.table {
	border: 1px solid #ddd;
	border-collapse: collapse;
	border-spacing: 0;
	width: 700px;
	margin: 10px auto;
	}

	.table>thead>tr>td,
	.table>tbody>tr>td {
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 5px 8px;
	}
	</style>
	</head>

	<body>
	<div id="app">
	<div id="checkbox">
	<ul class="box">
	<li v-for="item in data" :id="item.classId" class="item">
	<span>{{ item.className }}</span>
	<ul class="list">
	<li v-for="child in item.classList">
	<input :id="`cb-${item.classId}-${child.typeId}`" type="checkbox" :value="child.typeId" v-model="child.checked" /> {{ child.typeName }}
	</li>
	</ul>
	</li>
	</ul>
	</div>
	<div id="table">
	<table class="table">
	<thead>
	<tr>
	<td v-for="head in table.thead">{{head}}</td>
	<td v-if="table.thead.length > 0">价格</td>
	</tr>
	</thead>
	<tbody>
	<tr v-for="body in table.tbody" :id="body.data.map(b => b.typeId).join('-')">
	<td v-for="item in body.data" :id="item.typeId">{{item.typeName}}</td>
	<td v-if="table.tbody.length > 0 && table.tbody[0].data.length > 0">
	<input type="text" placeholder="价格" v-model="body.price" />
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
	<script type="text/javascript">
	var data = [
	{
	"classId": "1",
	"className": "气瓶规格",
	"classList": [
	{
	"typeId": "1",
	"typeName": "5kg"
	},
	{
	"typeId": "2",
	"typeName": "15kg"
	},
	{
	"typeId": "3",
	"typeName": "20kg"
	},
	{
	"typeId": "4",
	"typeName": "30kg"
	}
	]
	},
	{
	"classId": "2",
	"className": "气瓶类型",
	"classList": [
	{
	"typeId": "1",
	"typeName": "公司瓶"
	},
	{
	"typeId": "2",
	"typeName": "客户瓶"
	}
	]
	},
	{
	"classId": "3",
	"className": "加气类型",
	"classList": [
	{
	"typeId": "1",
	"typeName": "普通气"
	},
	{
	"typeId": "2",
	"typeName": "佳能气"
	},
	{
	"typeId": "3",
	"typeName": "丙烷"
	}
	]
	}
	]

	// add checked for class
	data = _.map(data, function (type) {
	var classList = _.map(type.classList, function (item) {
	item.checked = false
	return item
	})
	type.classList = classList
	return type
	})
	console.log(data)

	function cartesian() {
	return _.reduce(arguments, function (a, b) {
	return _.flatten(_.map(a, function (x) {
	return _.map(b, function (y) {
	return x.concat([y])
	})
	}), true)
	}, [[]])
	}

	var app = new Vue({
	el: '#app',
	data: {
	data: data
	},
	computed: {
	table: function () {
	var thead = _.reduce(
	_.filter(this.data, function (type) {
	return _.some(type.classList, function (item) {
	return item.checked
	})
	}),
	function (result, type) {
	result.push(type.className)
	return result
	},
	[]
	)

	var classData = _.filter(
	_.map(data, function (type) {
	return _.map(_.filter(type.classList, function (item) {
	return item.checked
	}), function (item) {
	return {
	typeId: item.typeId,
	typeName: item.typeName,
	}
	})
	}),
	function (type) {
	return type.length > 0
	}
	)
	var tbody = cartesian(...classData)
	tbody = _.map(tbody, function (body) {
	return {
	data: body,
	price: 0 // 设置初始价格0
	}
	})

	console.log('thead', thead)
	console.log('tbody', tbody)
	return {
	thead: thead,
	tbody: tbody
	}
	}
	}
	})
	</script>
	</body>

	</html>