记一次多维数组的全部排列组合方式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<div id="vue-app" class="table-responsive">
<template>
<table data-toggle="table" data-pagination="true" data-page-number="1" data-page-size="15" data-locale="zh-CN" data-search="true" data-classes="table table-striped">
<thead>
<tr>
<th v-for="title in titles">{{ title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items">
<td>{{ index }}</td>
<td v-for="sub_item in item">{{ sub_item }}</td>
</tr>
</tbody>
</table>
</template>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
const dataList = {
"titles": [
"#",
"你的年龄是",
"你的身高是"
],
"questions": [
["18岁-25岁", "26岁-30岁", "31岁-40岁", "41岁-46岁"],
["155cm以下", "155cm-165cm", "166cm-175cm", "176cm以上"]
]
};
var vm = new Vue({
el: "#vue-app",
data: {
titles: [],
questions: [],
results: [],
result: [],
items: []
},
methods: {
doExchange: function (arr, depth) {
for (let i = 0; i < arr[depth].length; i++) {
this.result[depth] = arr[depth][i];
if (depth !== arr.length - 1) {
this.doExchange(arr, depth + 1)
} else {
this.results.push(this.result.join('|'))
}
}
},
assemble: function (arr) {
this.doExchange(arr, 0);
for (let k = 0; k < this.results.length; k++) {
this.items.push(this.results[k].split("|"));
}
console.log("Size：" + this.results.length);
console.log("Data：" + this.results);
}
},
mounted: function () {
this.titles = dataList.titles;
this.questions = dataList.questions;
this.assemble(this.questions);
}
});
</script>
</body>
</html>