迷幻需求之element-ui下拉复选框
- 概述
注入树形数据加载出下拉checkbox-group，数据是比下拉树看着要清晰一点
- 效果
- 组件代码
<template> <div class="form-check-select-main"> <el-select v-model="inputData" :style="selectStyle" :popper-append-to-body="false" @remove-tag="removeTag" multiple placeholder="请选择" @change="selectChange()" @visible-change="visibleChange" :size="selectParam.size"> <el-option :key="0" value="" :style="formCheckSelectOption" ref="formOption"> <el-form> <div v-for="(node) in treeData" :key="node[checkBoxParam.valueName]" class="form-check-select-group"> <el-row :style="groupRowStyle"> <el-checkbox :indeterminate="isIndeterminate[node[checkBoxParam.valueName]]" v-model="nodeCheckAll[node[checkBoxParam.valueName]]" @change="(val)=>{checkBoxCheckAllChange(val,node)}" :label="node[checkBoxParam.valueName]" border > {{ node[checkBoxParam.lableName] }} </el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="checkedNodes" @change="checkBoxCheckChange"> <el-col v-for="child in node[checkBoxParam.childName]" :key="child[checkBoxParam.valueName]" :span="itemSpan"> <el-checkbox :style="checkboxStyle" @change="(val)=>{checkNode(val,child)}" :label="child[checkBoxParam.valueName]" border> {{ child[checkBoxParam.lableName] }} </el-checkbox> </el-col> </el-checkbox-group> </el-row> <hr style="FILTER: alpha(opacity = 100,finishopacity=0,style = 3);margin-top: 10px" width="100%" color=#987cb9 SIZE=3/> </div> </el-form> </el-option> </el-select> </div> </template> <script scoped> export default { name: "FormCheckSelect", props: { itemSpan: { type: Number, default: 4 }, with: { type: Number, default: document.body.scrollWidth - 84 }, useParentName: { type: Boolean, default: false }, defaultInputValue: { type: Array, }, defaultInputData: { type: Array, }, selectParam: { type: Object, }, checkBoxParam: { type: Object, required: true, }, size: { type: String, default: 'small' }, treeData: { type: Array, required: true, }, }, components: {}, computed: {}, data() { return { formCheckSelectOption: { 'height': 'auto !important', 'line-height': 'normal', 'width': this.with + 'px' }, selectStyle: { 'width': this.with + 'px' }, valueManage: { groupData: [] }, inputValue: [], inputData: [], checkboxStyle: { 'margin-top': '5px' }, groupRowStyle: { 'margin-top': '20px' }, checkedNodes: [], nodeCheckAll: {}, isIndeterminate: {} } }, methods: { /** * arr是否包含brr * @param arr * @param brr */ opClick() { }, isArrContain(arr, brr) { return brr.every(val => { return arr.includes(val); }) }, arrDelete(arr, element) { let index = arr.indexOf(element); arr.splice(index, 1); return arr; }, arrAdd(arr, element) { if (!element) { return arr; } if (arr.includes(element)) { return arr; } arr.push(element); return arr; }, updateValue(value, lable, isAdd) { if (isAdd) { this.arrAdd(this.inputValue, value); this.arrAdd(this.inputData, lable); } else { this.arrDelete(this.inputValue, value); this.arrDelete(this.inputData, lable); } }, checkNode(isAdd, node) { let id = node[this.checkBoxParam.valueName]; let lable = node[this.checkBoxParam.lableName]; let pId = node[this.checkBoxParam.parentValueName]; this.updateValue(id, lable, isAdd); this.calculationGroup(this.inputValue); this.calculationIndeterminate(pId); }, /** * 计算指定id的父选项 勾选框样式 */ calculationIndeterminate(pId) { for (let groupDatum of this.valueManage.groupData) { if (groupDatum.rootValue === pId) { //当选中值中有这组的成员并且不完全包含这组成员时 this.isIndeterminate[pId] = this.inputValue.some(p => { return groupDatum.valueArr.includes(p) }) && (!this.isArrContain(this.inputValue, groupDatum.valueArr)); break; } } }, selectChange() { return false; }, visibleChange(val) { if (val) { //修改样式 } }, checkBoxCheckChange(val) { }, checkBoxCheckAllChange(val, node) { for (let i = 0; i < node.children.length; i++) { let value = node.children[i][this.checkBoxParam.valueName]; let lable = node.children[i][this.checkBoxParam.lableName]; this.updateValue(value, lable, val); } this.calculationGroup(this.inputValue); this.isIndeterminate[node[this.checkBoxParam.valueName]] = false; }, initCalculationData() { if (!!this.treeData && this.treeData.length > 0) { for (let i = 0; i < this.treeData.length; i++) { let rootNode = this.treeData[i]; let rootNodeValue = rootNode[this.checkBoxParam.valueName]; let rootNodeLable = rootNode[this.checkBoxParam.lableName]; //根据注入数据 生成全选对象 let groupData = { rootValue: rootNodeValue, rootLable: rootNodeLable, valueArr: [], lableArr: [] } for (let i = 0; i < rootNode.children.length; i++) { let node = rootNode.children[i]; let value = node[this.checkBoxParam.valueName]; let lable = node[this.checkBoxParam.lableName]; groupData.valueArr.push(value); groupData.lableArr.push(lable); } this.valueManage.groupData.push(groupData); } } }, init() { this.initCalculationData(); //初始化默认选中 this.inputData = !!this.defaultInputData ? this.defaultInputData : []; this.inputValue = !!this.defaultInputValue ? this.defaultInputValue : []; //计算分组 this.calculationGroup(this.inputValue); }, getSelectData() { return this.inputData; }, getSelectValue() { return this.inputValue; }, getValueByLable(lable) { for (let group of this.valueManage.groupData) { for (let grouplable of group.lableArr) { if (grouplable === lable) { return group.valueArr[group.lableArr.indexOf(grouplable)]; } } } return ""; }, removeTag(val) { if (!this.valueManage.inputData) { return; } let removeIndex = this.valueManage.inputValue.indexOf(this.getValueByLable(val)); let groupArr = this.valueManage.groupData.filter(p => { return p.rootLable === val }); if (groupArr.length > 0) { let groupData = groupArr[0]; this.inputValue = this.inputValue.filter(p => { return !groupData.valueArr.includes(p); }); } else if (removeIndex >= 0) { this.inputValue.splice(removeIndex, 1); } this.calculationGroup(this.inputValue); }, calculationGroup(inputNewValue) { if (this.useParentName) { for (let i = 0; i < this.valueManage.groupData.length; i++) { let childrenValueArr = this.valueManage.groupData[i].valueArr; let rootLable = this.valueManage.groupData[i].rootLable; let rootValue = this.valueManage.groupData[i].rootValue; let isExitGroupLable = this.inputData.includes(rootLable); //选中值是否包含所有组中的元素 if (this.isArrContain(inputNewValue, childrenValueArr)) { this.nodeCheckAll[rootValue] = true if (!isExitGroupLable) { this.inputData = this.inputData.filter(o => { return this.valueManage.groupData[i].lableArr.indexOf(o) < 0 }) if (!this.valueManage.groupData[i].rootLable) { return; } this.inputData.push(this.valueManage.groupData[i].rootLable); } } else { this.calculationIndeterminate(rootValue) this.nodeCheckAll[rootValue] = false if (isExitGroupLable) { this.arrDelete(this.inputData, rootLable); } for (let value of inputNewValue) { let index = this.valueManage.groupData[i].valueArr.indexOf(value); if (index >= 0) { this.arrAdd(this.inputData, this.valueManage.groupData[i].lableArr[index]); } } } } } }, }, mounted() { }, created() { this.init() }, watch: { inputValue(newValue) { this.valueManage.inputValue = newValue this.checkedNodes = newValue; }, inputData(newValue) { if (newValue.some(d => { return (d === undefined || d === ""); })) { this.inputData = newValue.filter(d => { return !!d; }) } this.valueManage.inputData = newValue } } } </script> <style type="text/css"> </style>
- 调用代码
<template> <div id="app"> <el-button type="primary" @click="getValue">获取值</el-button> <el-button type="primary" @click="getLable">获取名</el-button> <formcheckselect ref="checkSelect" :default-input-data="defaultLable" :default-input-value="defaultValue" :tree-data="treeData" :check-box-param="checkBoxParam" :select-param="selectParam" :useParentName=true /> </div> </template> <script> import formcheckselect from './components/common/formcheckselect' export default { name: 'app', data() { return { selectParam: { size: 'small', }, checkBoxParam: { lableName: 'name', valueName: 'company_id', parentValueName:'parent_company_id', childName: 'children' }, defaultValue: [], defaultLable: [], treeData: [{ "company_id": "1", "parent_company_id": "2", "name": "局属事业单位", "simple_name": null, "code": null, "owner": null, "qualification": null, "capital": null, "address": null, "city": null, "station": null, "country": null, "phone": null, "fax": null, "photo": null, "web_site": null, "post": null, "industry": null, "orient": null, "registry_date": null, "note": null, "state": "0", "org_type": null, "type": null, "idx": "BAAA", "node": null, "parent_company_name": null, "children": [{ "company_id": "3", "parent_company_id": "1", "name": "执法监察支队", "simple_name": null, "code": null, "owner": null, "qualification": null, "capital": null, "address": null, "city": null, "station": null, "country": null, "phone": null, "fax": null, "photo": null, "web_site": null, "post": null, "industry": null, "orient": null, "registry_date": null, "note": null, "state": "0", "org_type": null, "type": null, "idx": "BAAA", "node": null, "parent_company_name": null, "children": null }, { "company_id": "4", "parent_company_id": "1", "name": "土地储备中心", "simple_name": null, "code": null, "owner": null, "qualification": null, "capital": null, "address": null, "city": null, "station": null, "country": null, "phone": null, "fax": null, "photo": null, "web_site": null, "post": null, "industry": null, "orient": null, "registry_date": null, "note": null, "state": "0", "org_type": null, "type": null, "idx": "BBAA", "node": null, "parent_company_name": null, "children": null }], } }, components: { formcheckselect }, methods: { getValue() { console.info(this.$refs.checkSelect.$data.inputValue) }, getLable() { console.info(this.$refs.checkSelect.$data.inputData) } } } function changeStatus() { alert("xxx"); } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; height: 100%; } .inputHeight .el-input__inner { height: 18px; } </style>
