iview-select-tree
Version:
基于iview的下拉菜单树的实现
2 lines • 14.1 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("selectTree",[],t):"object"==typeof exports?exports.selectTree=t():e.selectTree=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(a){if(i[a])return i[a].exports;var s=i[a]={i:a,l:!1,exports:{}};return e[a].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};return t.m=e,t.c=i,t.d=function(e,i,a){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,i){"use strict";t.a={name:"selectTree",props:{treeData:{type:Array},value:{},filterable:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},showQuery:{type:Boolean,default:!0},disabled:{type:Boolean,default:!0}},data:function(){return{queryVal:"",hideValue:"",valueType:"string",selectNode:[],multipleShowVal:[],multipleHideVal:[],showTree:!1,iconVal:"ios-arrow-down",cloneData:JSON.parse(JSON.stringify(this.treeData)),showData:[],queryData:[],queryTreeVal:""}},methods:{clickIcon:function(){this.disabled&&("ios-close-circle"===this.iconVal?this.clearVal():this.showSelectTree())},pickTree:function(e){if("string"===this.valueType)for(var t=0;t<this.showData.length;t++)this.showData[t].value===e?this.showData[t].selected=!1:void 0!==this.showData[t].children&&this.recursionPickTree(e,this.showData[t].children);else for(var i=0;i<e.length;i++)for(var a=0;a<this.showData.length;a++)this.showData[a].value===e[i]?this.showData[a].selected=!1:void 0!==this.showData[a].children&&this.recursionPickTree(e[i],this.showData[a].children)},recursionPickTree:function(e,t){for(var i=0;i<t.length;i++)t[i].value===e?t[i].selected=!1:void 0!==t[i].children&&t[i].children.length>0&&this.recursionPickTree(e,t[i].children)},selectTreeChange:function(){if(this.queryData=JSON.parse(JSON.stringify(this.showData)),""!==this.queryTreeVal){for(var e=[],t=0;t<this.queryData.length;t++){this.recursionTreeData(this.queryTreeVal,this.queryData[t])||e.push(t)}this.queryData=this.queryData.filter(function(t,i){return!e.includes(i)})}},recursionTreeData:function(e,t){var i=!1,a=[];if(void 0===t.children)return-1!==t.title.indexOf(e);for(var s=0;s<t.children.length;s++)i?this.recursionTreeData(e,t.children[s])||a.push(s):(i=this.recursionTreeData(e,t.children[s]))||a.push(s);return t.children=t.children.filter(function(e,t){return!a.includes(t)}),i||-1!==t.title.indexOf(e)},clearVal:function(){this.disabled&&this.clearable&&!this.multiple&&"ios-close-circle"===this.iconVal&&(this.pickTree(this.hideValue),this.queryVal="",this.hideValue="",this.showTree?this.iconVal="ios-arrow-up":this.iconVal="ios-arrow-down",this.$emit("input",""))},mouseover:function(){this.clearable&&!this.multiple&&"ios-close-circle"!==this.iconVal&&""!==this.hideValue&&(this.iconVal="ios-close-circle")},mouseleave:function(){this.clearable&&!this.multiple&&(this.showTree?this.iconVal="ios-arrow-up":this.iconVal="ios-arrow-down")},selectChange:function(e){var t=void 0,i=void 0;if(this.multiple){this.multipleShowVal=[],this.multipleHideVal=[];for(var a=0;a<e.length;a++)this.multipleShowVal.push(e[a].title),this.multipleHideVal.push(e[a].value);this.$emit("input",this.multipleHideVal),t=this.multipleHideVal,i=this.multipleShowVal}else 0===e.length?(this.queryVal="",this.hideValue="",this.$emit("input","")):(this.queryVal=e[0].title,this.hideValue=e[0].value,this.$emit("input",e[0].value)),this.showTree=!1,this.iconVal="ios-arrow-down",t=this.hideValue,i=this.queryVal,this.$emit("on-select-change",this.queryVal,this.hideValue);this.$emit("on-select-change",t,i)},clickInputShow:function(){this.disabled&&this.showSelectTree()},showSelectTree:function(){this.showTree?this.showTree=!1:this.showTree=!0,"ios-close-circle"!==this.iconVal&&("ios-arrow-down"===this.iconVal?this.iconVal="ios-arrow-up":"ios-arrow-up"===this.iconVal&&(this.iconVal="ios-arrow-down"))},resetTreeData:function(){this.cloneData=JSON.parse(JSON.stringify(this.treeData))},removeVal:function(e){if(this.disabled){for(var t=0;t<this.showData.length;t++)this.showData[t].value===this.multipleHideVal[e]?(this.hideValue=this.treeData[t].value,this.queryVal=this.treeData[t].title,this.showData[t].selected=!1):void 0!==this.showData[t].children&&this.recursionRemoveTreeData(this.showData[t].children,this.multipleHideVal[e]);this.multipleShowVal.splice(e,1),this.multipleHideVal.splice(e,1)}},recursionRemoveTreeData:function(e,t){for(var i=0;i<e.length;i++){if(e[i].value===t)return void(e[i].selected=!1);void 0!==e[i].children&&e[i].children.length>0&&this.recursionRemoveTreeData(e[i].children,t)}},checkValueType:function(){"number"==typeof this.value||"string"==typeof this.value?this.valueType="string":this.valueType="array"},initQueryMultiple:function(){for(var e=0;e<this.value.length;e++)for(var t=0;t<this.cloneData.length;t++){if(this.cloneData[t].value===this.value[e]){this.multipleShowVal.push(this.cloneData[t].title),this.multipleHideVal.push(this.cloneData[t].value),this.$emit("input",this.multipleHideVal),this.cloneData[t].selected=!0;break}void 0!==this.cloneData[t].children&&this.recursionQueryTreeData(this.cloneData[t].children,this.value[e])}},initQueryVal:function(){this.queryVal="",this.showTree=!1;for(var e=0;e<this.cloneData.length;e++){if(this.cloneData[e].value===this.value)return this.hideValue=this.cloneData[e].value,this.queryVal=this.cloneData[e].title,this.$emit("input",this.cloneData[e].value),void(this.cloneData[e].selected=!0);void 0!==this.cloneData[e].children&&this.recursionQueryTreeData(this.cloneData[e].children,this.value)}},recursionQueryTreeData:function(e,t){for(var i=0;i<e.length;i++)e[i].value===t?(this.multiple?(this.multipleShowVal.push(e[i].title),this.multipleHideVal.push(e[i].value),this.$emit("input",this.multipleHideVal)):(this.hideValue=e[i].value,this.queryVal=e[i].title,this.$emit("input",e[i].value)),e[i].selected=!0):void 0!==e[i].children&&this.recursionQueryTreeData(e[i].children,t)},removeShowVal:function(e,t,i,a){for(var s=0;s<e.length;s++){if(e[s].value===t){i.push(e[s].title),a.push(e[s].value);break}void 0!==e[s].children&&e[s].children.length>0&&this.removeShowVal(e[s].children,t,i,a)}}},watch:{value:function(e){this.multiple?this.initQueryMultiple():this.initQueryVal()},treeData:function(e){this.cloneData=JSON.parse(JSON.stringify(e)),this.showData=JSON.parse(JSON.stringify(this.cloneData)),this.queryData=this.showData;var t=[],i=[];if(this.multiple){for(var a=0;a<this.multipleHideVal.length;a++)this.removeShowVal(this.showData,this.multipleHideVal[a],i,t);this.multipleHideVal=t,this.multipleShowVal=i,this.initQueryMultiple()}else this.removeShowVal(this.showData,this.hideValue,i,t),0===t.length&&(this.pickTree(this.hideValue),this.queryVal="",this.hideValue=""),this.initQueryVal()}},mounted:function(){this.checkValueType(),this.showData=JSON.parse(JSON.stringify(this.cloneData)),this.queryData=this.showData}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=i(2);a.a.install=function(e){return e.component(a.a.name,a.a)},t.default=a.a},function(e,t,i){"use strict";function a(e){i(3)}var s=i(0),r=i(9),n=i(8),l=a,o=n(s.a,r.a,!1,l,null,null);t.a=o.exports},function(e,t,i){var a=i(4);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);i(6)("5bcbae59",a,!0,{})},function(e,t,i){t=e.exports=i(5)(!1),t.push([e.i,".ivu-select-placeholder{color:#c5c8ce;padding-right:22px}.ivu-select-placeholder,.ivu-select-selected-value{display:block;height:30px;line-height:30px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:8px}.ivu-select-selected-value{padding-right:24px}",""])},function(e,t){function i(e,t){var i=e[1]||"",s=e[3];if(!s)return i;if(t&&"function"==typeof btoa){var r=a(s);return[i].concat(s.sources.map(function(e){return"/*# sourceURL="+s.sourceRoot+e+" */"})).concat([r]).join("\n")}return[i].join("\n")}function a(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var a=i(t,e);return t[2]?"@media "+t[2]+"{"+a+"}":a}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var a={},s=0;s<this.length;s++){var r=this[s][0];"number"==typeof r&&(a[r]=!0)}for(s=0;s<e.length;s++){var n=e[s];"number"==typeof n[0]&&a[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(e,t,i){function a(e){for(var t=0;t<e.length;t++){var i=e[t],a=h[i.id];if(a){a.refs++;for(var s=0;s<a.parts.length;s++)a.parts[s](i.parts[s]);for(;s<i.parts.length;s++)a.parts.push(r(i.parts[s]));a.parts.length>i.parts.length&&(a.parts.length=i.parts.length)}else{for(var n=[],s=0;s<i.parts.length;s++)n.push(r(i.parts[s]));h[i.id]={id:i.id,refs:1,parts:n}}}}function s(){var e=document.createElement("style");return e.type="text/css",c.appendChild(e),e}function r(e){var t,i,a=document.querySelector("style["+y+'~="'+e.id+'"]');if(a){if(f)return v;a.parentNode.removeChild(a)}if(w){var r=p++;a=d||(d=s()),t=n.bind(null,a,r,!1),i=n.bind(null,a,r,!0)}else a=s(),t=l.bind(null,a),i=function(){a.parentNode.removeChild(a)};return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else i()}}function n(e,t,i,a){var s=i?"":a.css;if(e.styleSheet)e.styleSheet.cssText=V(t,s);else{var r=document.createTextNode(s),n=e.childNodes;n[t]&&e.removeChild(n[t]),n.length?e.insertBefore(r,n[t]):e.appendChild(r)}}function l(e,t){var i=t.css,a=t.media,s=t.sourceMap;if(a&&e.setAttribute("media",a),m.ssrId&&e.setAttribute(y,t.id),s&&(i+="\n/*# sourceURL="+s.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(7),h={},c=o&&(document.head||document.getElementsByTagName("head")[0]),d=null,p=0,f=!1,v=function(){},m=null,y="data-vue-ssr-id",w="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,i,s){f=i,m=s||{};var r=u(e,t);return a(r),function(t){for(var i=[],s=0;s<r.length;s++){var n=r[s],l=h[n.id];l.refs--,i.push(l)}t?(r=u(e,t),a(r)):r=[];for(var s=0;s<i.length;s++){var l=i[s];if(0===l.refs){for(var o=0;o<l.parts.length;o++)l.parts[o]();delete h[l.id]}}}};var V=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var i=[],a={},s=0;s<t.length;s++){var r=t[s],n=r[0],l=r[1],o=r[2],u=r[3],h={id:e+":"+s,css:l,media:o,sourceMap:u};a[n]?a[n].parts.push(h):i.push(a[n]={id:n,parts:[h]})}return i}},function(e,t){e.exports=function(e,t,i,a,s,r){var n,l=e=e||{},o=typeof e.default;"object"!==o&&"function"!==o||(n=e,l=e.default);var u="function"==typeof l?l.options:l;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),s&&(u._scopeId=s);var h;if(r?(h=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),a&&a.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},u._ssrRegister=h):a&&(h=a),h){var c=u.functional,d=c?u.render:u.beforeCreate;c?(u._injectStyles=h,u.render=function(e,t){return h.call(t),d(e,t)}):u.beforeCreate=d?[].concat(d,h):[h]}return{esModule:n,exports:l,options:u}}},function(e,t,i){"use strict";var a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"ivu-select ivu-select-default"},[i("div",{staticClass:"ivu-select-selection ivu-form-item-content",attrs:{tabindex:"0"}},[i("div",{on:{mouseover:e.mouseover,mouseleave:e.mouseleave}},[i("div",{on:{click:e.clickInputShow}},[e._l(e.multipleShowVal,function(t,a){return e.multiple?i("div",{key:t,staticClass:"ivu-tag ivu-tag-checked "},[i("span",{staticClass:"ivu-tag-text "},[e._v(e._s(t))]),e._v(" "),i("i",{staticClass:"ivu-icon ivu-icon-ios-close",on:{click:function(t){return t.stopPropagation(),e.removeVal(a)}}})]):e._e()}),e._v(" "),e.multiple||""==e.queryVal?e._e():i("span",{staticClass:"ivu-select-selected-value"},[e._v(e._s(e.queryVal))]),e._v(" "),0===e.multipleHideVal.length&&e.multiple?i("span",{staticClass:"ivu-select-placeholder"},[e._v("请选择")]):e._e(),e._v(" "),""!==e.queryVal||e.multiple?e._e():i("span",{staticClass:"ivu-select-placeholder"},[e._v("请选择")]),e._v(" "),i("span",{staticStyle:{display:"none"}})],2),e._v(" "),i("i",{class:"ivu-icon ivu-icon-"+e.iconVal+" ivu-select-arrow",on:{click:e.clickIcon}})]),e._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:e.showTree,expression:"showTree"}],staticClass:"ivu-select-dropdown",staticStyle:{"max-height":"200px","overflow-y":"scroll","z-index":"9999",width:"100%"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showQuery,expression:"showQuery"}],staticStyle:{width:"95%","margin-left":"10px"}},[i("Input",{attrs:{placeholder:"请输入筛选条件"},on:{"on-change":e.selectTreeChange},model:{value:e.queryTreeVal,callback:function(t){e.queryTreeVal=t},expression:"queryTreeVal"}})],1),e._v(" "),i("div",{staticStyle:{width:"95%","margin-left":"10px"}},[i("Tree",{ref:"tree",attrs:{data:e.queryData,multiple:e.multiple},on:{"on-select-change":e.selectChange}})],1)])])])},s=[],r={render:a,staticRenderFns:s};t.a=r}])});
//# sourceMappingURL=selectTree.js.map