<!DOCTYPE html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Element UI Cascader Demo</title><!-- 引入Element UI库 --><linkrel="stylesheet"href="/element-ui/lib/theme-chalk/index.css"/><script src="/npm/vue/dist/vue.js"></script><script src="/element-ui/lib/index.js"></script><style scoped>.el-cascader-node__prefix {opacity: 0;}</style></head><body><div id="app"><el-cascader-panel:options="options"placeholder="请选择":props="cascaderProps"><template v-slot="{ node, data }"><el-checkbox:indeterminate="isIndeterminate[data.id]"v-model="checkedValues":label="data.id"@change="checkBoxChange(node)"><span @click.prevent="handleSpanClick(data.id)">{{ data.partnerName }}</span></el-checkbox></template></el-cascader-panel><button @click="silence">-----------------------------</button></div><script>new Vue({el: '#app',data() {return {options: [{id: 'zhinan',partnerName: '指南',children: [{id: 'shejiyuanze',partnerName: '设计原则',children: [{id: 'yizhi',partnerName: '一致'}, {id: 'fankui',partnerName: '反馈'}, {id: 'xiaolv',partnerName: '效率'}, {id: 'kekong',partnerName: '可控'}]}, {id: 'daohang',partnerName: '导航',children: [{id: 'cexiangdaohang',partnerName: '侧向导航'}, {id: 'dingbudaohang',partnerName: '顶部导航'}]}]}, {id: 'zujian',partnerName: '组件',children: [{id: 'basic',partnerName: 'Basic',children: [{id: 'layout',partnerName: 'Layout 布局'}, {id: 'color',partnerName: 'Color 色彩'}, {id: 'typography',partnerName: 'Typography 字体'}, {id: 'icon',partnerName: 'Icon 图标'}, {id: 'button',partnerName: 'Button 按钮'}]}, {id: 'form',partnerName: 'Form',children: [{id: 'radio',partnerName: 'Radio 单选框'}, {id: 'checkbox',partnerName: 'Checkbox 多选框'}, {id: 'input',partnerName: 'Input 输入框'}, {id: 'input-number',partnerName: 'InputNumber 计数器'}, {id: 'select',partnerName: 'Select 选择器'}, {id: 'cascader',partnerName: 'Cascader 级联选择器'}, {id: 'switch',partnerName: 'Switch 开关'}, {id: 'slider',partnerName: 'Slider 滑块'}, {id: 'time-picker',partnerName: 'TimePicker 时间选择器'}, {id: 'date-picker',partnerName: 'DatePicker 日期选择器'}, {id: 'datetime-picker',partnerName: 'DateTimePicker 日期时间选择器'}, {id: 'upload',partnerName: 'Upload 上传'}, {id: 'rate',partnerName: 'Rate 评分'}, {id: 'form',partnerName: 'Form 表单'}]}, {id: 'data',partnerName: 'Data',children: [{id: 'table',partnerName: 'Table 表格'}, {id: 'tag',partnerName: 'Tag 标签'}, {id: 'progress',partnerName: 'Progress 进度条'}, {id: 'tree',partnerName: 'Tree 树形控件'}, {id: 'pagination',partnerName: 'Pagination 分页'}, {id: 'badge',partnerName: 'Badge 标记'}]}, {id: 'notice',partnerName: 'Notice',children: [{id: 'alert',partnerName: 'Alert 警告'}, {id: 'loading',partnerName: 'Loading 加载'}, {id: 'message',partnerName: 'Message 消息提示'}, {id: 'message-box',partnerName: 'MessageBox 弹框'}, {id: 'notification',partnerName: 'Notification 通知'}]}, {id: 'navigation',partnerName: 'Navigation',children: [{id: 'menu',partnerName: 'NavMenu 导航菜单'}, {id: 'tabs',partnerName: 'Tabs 标签页'}, {id: 'breadcrumb',partnerName: 'Breadcrumb 面包屑'}, {id: 'dropdown',partnerName: 'Dropdown 下拉菜单'}, {id: 'steps',partnerName: 'Steps 步骤条'}]}, {id: 'others',partnerName: 'Others',children: [{id: 'dialog',partnerName: 'Dialog 对话框'}, {id: 'tooltip',partnerName: 'Tooltip 文字提示'}, {id: 'popover',partnerName: 'Popover 弹出框'}, {id: 'card',partnerName: 'Card 卡片'}, {id: 'carousel',partnerName: 'Carousel 走马灯'}, {id: 'collapse',partnerName: 'Collapse 折叠面板'}]}]}, {id: 'ziyuan',partnerName: '资源',children: [{id: 'axure',partnerName: 'Axure Components'}, {id: 'sketch',partnerName: 'Sketch Templates'}, {id: 'jiaohu',partnerName: '组件交互文档'}]}],checkedValues: [],parentValue: '',isIndeterminate: {},map: new Map(),cascaderProps: {value: "id",label: "partnerName",},};},methods: {handleSpanClick() {},checkBoxChange: function (event) {console.log("checkBoxChange", event);this.map.set(event.value, event.path);let level = event.level;//选中层级1if (level === 1) {this.checkedValues = [];//未选中if (this.isIndeterminate.hasOwnProperty(event.value)) {this.isIndeterminate = {};} else {this.isIndeterminate = {};this.$set(this.isIndeterminate, event.value, true)}this.parentValue = event.value;return;}//选择层级2if (level === 2) {//取消选中if (this.isIndeterminate.hasOwnProperty(event.value)) {this.$delete(this.isIndeterminate, event.value)}//取消选中if (this.parentValue !== event.parent.value && this.parentValue === event.value) {this.checkedValues = [];this.parentValue = event.parent.value;return;}//三级全选this.checkedValues = event.children.map(item => item.value);//并且选中当前点击的二级this.checkedValues.push(event.value);//父级半选this.isIndeterminate = {};this.$set(this.isIndeterminate, event.parent.value, true)this.parentValue = event.value;}//选择层级3if (level === 3) {//改变层级if (this.parentValue !== event.parent.value) {this.isIndeterminate = {};this.$set(this.isIndeterminate, event.parent.value, true)this.$set(this.isIndeterminate, event.parent.parent.value, true)this.checkedValues = new Array(event.value);this.parentValue = event.parent.value;return;}//未改变层级this.parentValue = event.parent.value;let as = event.parent.children.map(item => item.value);if (as.length === this.checkedValues.length && as.every(ao => this.checkedValues.includes(ao))) {//删除层级二半选this.$delete(this.isIndeterminate, event.parent.value)//增加父级勾选this.checkedValues.push(event.parent.value)} else {//增加父级半勾if (!this.isIndeterminate.hasOwnProperty(event.parent.value)) {this.$set(this.isIndeterminate, event.parent.value, true)}//删除父级勾选let index = this.checkedValues.indexOf(event.parent.value);if (index !== -1) {this.checkedValues.splice(index, 1);}}}},silence() {console.log("checkedValues:", this.checkedValues)console.log("isIndeterminate:", this.isIndeterminate)console.log("this.parentValue:", this.parentValue)// let array= this.$refs.cascaderRef.getCheckedNodes();//要提交数据let reqArray = [];this.checkedValues.forEach(key => {reqArray.push(this.map.get(key))});},},});</script></body></html>
