网站死链是什么,帮别人做网站服务器,网站建设和实现论文,wordpress 响应分页先上效果图 思路#xff1a;刚开始最上面我用了el-input#xff0c;选择框里面内容用了el-inputel-tree使用#xff0c;但后面发现最上面那个可以输入#xff0c;那岂不是可以不需要下拉就可以使用#xff0c;岂不是违背了写这个组件的初衷#xff0c;所以后面改成div自定…先上效果图 思路刚开始最上面我用了el-input选择框里面内容用了el-inputel-tree使用但后面发现最上面那个可以输入那岂不是可以不需要下拉就可以使用岂不是违背了写这个组件的初衷所以后面改成div自定义框 组件用法上面框是你点击下面树形后自动填写到上面去树形上面的筛选数据框是筛选树形数据的 代码可能没考虑那么周全暂时还没加上校验加了禁用点击和选择属性是disabled 前提请安装element ui组件不会的参照安装Element UI 代码结构 上组件代码在components创建customSelectTree文件夹下创建index.vue templatediv classcTree!-- 可点击可下拉选择组件 --div classcTree-inputdiv stylewhite-space: nowrap; position: relativediv classcTree-input-value{{ value }}/divdiv classcTree-input-value-iconistylepadding-right: 5pxclassel-icon-circle-closev-showvalueclick.stopvalue /ii:style{ transform: visible ? rotate(180deg) : }classel-icon-arrow-downclick.stopvisible !visible/i/div/div/divdiv classcTree-box v-ifvisiblediv classcTree-box-inputel-input v-modelfilterText placeholder筛选数据 clearable //divdiv classcTree-box-contentel-treereftreenode-keylabel:highlight-currenttrue:expand-on-click-nodefalse:datatreeList:filter-node-methodfilterNode:propsdefaultPropsnode-clickhandleNodeClickspan classcustom-tree-node slot-scope{ node }span:style{ cursor: node.disabled true ? not-allowed : }{{ node.label }}/span/span/el-tree/div/div/div /template script export default {name: custonTree,props: {// 传入下拉框数据treeList: {type: Array,default: () [],},defaultProps: {type: Object,default: () ({children: children,label: label,disabled: function (data) {if (data.disabled true) {return true;}},}),},},data() {return {value: ,filterText: ,label: ,visible: false,};},mounted() {let that this;document.addEventListener(click, (e) {if (!that.$el.contains(e.target)) this.visible false;});},watch: {filterText(val) {this.$refs.tree.filter(val);},},methods: {disabled(data) {if (data.disabled true) {return true;}},filterNode(value, data, node) {if (!value) return true;let _array [];this.getReturnNode(node, _array, value);let result false;_array.forEach((item) {result result || item;});return result;},getReturnNode(node, _array, value) {console.log(node, node.data);let isPass node node.label node.label.indexOf(value) ! -1;isPass ? _array.push(isPass) : ;if (!isPass node.children) {this.getReturnNode(node.children, _array, value);}},handleNodeClick(data) {if (data.disabled true) return;this.value data.label;// this.$emit(data);},clickTitle() {if (this.visible true) {this.visible false;}},}, }; /script style langscss scoped .cTree {-input {display: flex;justify-content: flex-start;align-items: center;box-sizing: border-box;color: #ffffff;font-size: 14px;border-radius: 4px;// cursor: pointer;margin-right: 20px;::v-deep .el-icon-arrow-down,.el-icon-circle-close {color: #c0c4cc;font-size: 18px;cursor: pointer;}-value {-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;height: 40px;line-height: 40px;outline: 0;padding: 0 15px;transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);width: 250px;-icon {position: absolute;right: 0;top: 50%;transform: translateY(-50%);padding-right: 10px;}}}-box {position: absolute;user-select: none;border-radius: 6px;margin-top: 12px;width: 300px;z-index: 99;border: 1px solid #f0f0f0;box-shadow: 5px 5px 5px #efefef;:after {content: ;position: absolute;margin-top: -11px;top: 0;left: 57%;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #e8eaec;// margin-left: 120px;// box-shadow: 10px 5px 5px #efefef;}-input {padding: 2px 6px;}-content {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #606266;font-size: 14px;line-height: 34px;box-sizing: border-box;cursor: pointer;max-height: 250px;overflow-y: auto;}} } ::v-deep .el-input__inner {position: relative; } /style使用 templatediv idappCustonBtn :treeListtreeList //div /templatescript import CustonBtn from /components/customSelectTree/index.vue;export default {name: App,components: {CustonBtn,},data() {return {treeList: [{label: 一级1,disabled: true,children: [{label: 二级1-1,disabled: true,children: [{label: 三级1-1-1,disabled: false,},],},],},{label: 一级2,disabled: true,children: [{label: 二级2-1,disabled: true,children: [{label: 三级2-1-1,disabled: false,},],},{label: 二级2-2,disabled: true,children: [{label: 三级2-2-1,disabled: false,},],},],},{label: 一级3,disabled: true,children: [{label: 二级3-1,disabled: true,children: [{label: 三级3-1-1,disabled: false,},],},{label: 二级3-2,disabled: true,children: [{label: 三级3-2-1,disabled: false,},],},],},],};}, }; /scriptstyle/style