vue 实现el-select组件 配合 el-tabs 完成动态tabs然后有勾选 全选，还有模拟提交，回显数据
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> --><!-- 引入样式 --><linkrel="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-selectclass="increase_list_ipt"v-model="type"placeholder="请输入"multiplefilterable@change="changeBrand"><el-optionv-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-panev-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-groupv-model="item.checkedArr"@change="checkCheck($event,item)"><el-checkboxstyle="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>
