cv即可使用
<!DOCTYPE html>
<!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>
<!-- <link rel="stylesheet" href="../vue/element_ui.css" /> -->
<!-- <script src="../vue/vue.js"></script> -->
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="../vue/element_ui.js"></script> -->
<style>
.increase_list_ipt {
width: 100%;
}
.increase_list_ipt .el-input__suffix {
top: 1px;
right: 2px;
}
.increase_list_ipt .el-tag {
height: 32px;
background: #f7f8fa;
border: 1px solid #e5e6eb;
color: #1d2129;
font-size: 16px;
border-radius: 14px;
}
.increase_list_ipt .el-tag__close.el-icon-close {
color: #1d2129;
font-size: 20px;
background-color: transparent;
}
.increase_list_ipt .el-tag__close.el-icon-close:hover {
color: #1d2129;
background-color: transparent;
}
.model_tabs {
width: 100%;
background-color: #f7f8fa;
}
.model_tabs .el-tabs__content {
padding: 0px 15px;
}
</style>
</head>
<body>
<div id="app">
<el-select
class="increase_list_ipt"
v-model="type"
placeholder="请输入"
multiple
filterable
@change="changeBrand"
>
<el-option
v-for="item in typeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<el-tabs v-model="index" class="model_tabs" v-if="tabList != 0">
<el-tab-pane
v-for="(item, index) in tabList"
:key="item.name"
:label="item.name"
:name="item.name"
>
<span slot="label">
<el-checkbox
:value="item.checked"
@change="checkAll(item,index)"
></el-checkbox>
{{item.name}} {{item.checkedArr != 0 ? "+" + item.checkedArr.length
: ''}}
</span>
<el-checkbox-group
v-model="item.checkedArr"
@change="checkCheck($event,item)"
>
<el-checkbox
style="margin-bottom: 15px"
v-for="city in item.model_list"
:label="city.id"
:key="city.id"
>
{{city.model_name}}</el-checkbox
>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
<!-- 模拟提交 -->
<el-button @click="submit">提交</el-button>
</div>
<script type="module">
const vm = new Vue({
el: "#app",
data() {
return {
index: "",
// select选中的
type: [],
// 下面的tab展示的
tabList: [],
// 下面则是后台返回所有数组
typeList: [
{
name: "新海诚",
id: 1,
model_list: [
{ model_name: "铃芽户缔", id: 11 },
{ model_name: "天气之子", id: 12 },
{ model_name: "你的名字", id: 13 },
{ model_name: "言叶之庭", id: 14 },
{ model_name: "秒速五厘米", id: 15 },
],
},
{
name: "神作",
id: 2,
model_list: [
{ model_name: "Clannad", id: 21 },
{ model_name: "无职转生", id: 22 },
{ model_name: "轻音少女", id: 23 },
],
},
{
name: "唯美",
id: 3,
model_list: [{ model_name: "紫罗兰永恒花园", id: 31 }],
},
],
};
},
created() {
// 模拟后端返回数据回显
let data = localStorage.getItem("set");
let { bind, ids } = JSON.parse(data);
if (bind && ids) {
let check = bind.map((obj) => Object.values(obj)[0]);
this.tabList = this.typeList
.filter((item) => ids.includes(item.id))
.map((v, j) => {
return {
...v,
checked:
check[j] != 0
? check[j].split(",").length == v.model_list.length
: false,
checkedArr:
check[j] != 0
? check[j]?.split(",").map((item) => item / 1)
: [],
model_list: v.model_list.map((i) => {
return {
...i,
checked:
v.checkedArr != 0
? v.checkedArr?.includes(i.id)
: false,
};
}),
};
});
this.type = ids;
this.index = this.tabList[0].name;
}
},
methods: {
changeBrand(v) {
// 筛选出现在的有的
let arr = this.tabList.map((v) => v.id);
// 过滤出现在没得
let res = v.filter((item) => !arr.includes(item));
// 然后将新增的处理新增字段
let newData = this.typeList
.filter((item) => res.includes(item.id))
.map((v) => {
return {
...v,
checked: false,
checkedArr: [],
model_list: v.model_list.map((i) => {
return {
...i,
checked: false,
};
}),
};
});
// 如果新增则把新增的拼接过来
this.tabList = [...this.tabList, ...newData];
// 如果删除则把删除的过滤掉
this.tabList = this.tabList.filter((item) => v.includes(item.id));
// 每一次操作让tab回到第一个
this.index = this.tabList[0]?.name;
},
// 全选
checkAll(item) {
item.checked = !item.checked;
console.log(item.checked,"点击");
item.checked
? (item.checkedArr = item.model_list.map((v) => v.id))
: (item.checkedArr = []);
},
// 单选
checkCheck(value, item) {
let checkedCount = value.length;
item.checked = checkedCount === item.model_list.length;
},
// 提交
submit() {
let data = {
ids: this.tabList.map((v) => v.id),
bind: this.tabList.map((v) => {
return { [v.id]: v.checkedArr.join(",") };
}),
};
// console.log(data);
localStorage.setItem("set", JSON.stringify(data));
},
},
});
</script>
</body>
</html>
