<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ tableData }}
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
collegeData: [
{
"id": 2,
"name": "哲学院",
},
{
"id": 5,
"name": "国际关系学院",
},
{
"id": 6,
"name": "经济学院",
}
],
tableData: [
{
"college_name": "哲学院",
"code": "200",
},
{
"college_name": "国际关系学院",
"code": "201",
}
],
},
created() {
const temp = this.diff(this.collegeData, this.tableData, 'name', 'college_name')
temp.map(n => {
console.log(n)
this.tableData.push({
"college_name": n.name,
"code": "202",
})
})
},
methods: {
diff(arr1, arr2, value, value1) {
// 如果数组里是对象的话
// diff就是arr1
let diff = [...arr1]
for (let i = 0; i < arr1.length; i++) {
let flag = false
for (let j = 0; j < arr2.length; j++) {
if (arr1[i][value] === arr2[j][value1]) flag = true
}
diff.findIndex(_ =>{
console.log(_)
})
if (flag) diff.splice(diff.findIndex(_ => _[value] === arr1[i][value]),1)
}
return diff
}
},
})
</script>