360免费建站软仵下载上海高端网页设计

当前位置： 首页 > news >正文

360免费建站软仵下载,上海高端网页设计,flash可以做网站,如何安装字体wordpress前言 此类选择器根据vueelementUI实现#xff0c;使用vue3的可以根据此案例稍作改动即可实现#xff0c;主要功能有弹出选择、搜索过滤、搜索结果高亮等#xff0c;此选择器只支持单选#xff0c;如需多选可在此基础进行改造。 效果图 代码实现 使用时#xff0c;props-…前言 此类选择器根据vueelementUI实现使用vue3的可以根据此案例稍作改动即可实现主要功能有弹出选择、搜索过滤、搜索结果高亮等此选择器只支持单选如需多选可在此基础进行改造。 效果图 代码实现 使用时props-value必须要传并且要保证其唯一性 HTML !– * description: 通用树形弹窗选择框* fileName: treeDialogSelect/index.vue * author: tan * date: 2024-09-10 16:31:49* Attributes: data 展示数据 arrayvalue 展示在输入框的值props 配置选项具体配置可以参照element ui库中el-tree的配置 objectexpand-first-level 当根节点只有一个是是否展开默认为是search-highlight 是否开启搜索高亮默认开启仅在slot-tree不传入时生效onFilter 自定义过滤规则参数为:value 搜索框的值data 原始数据callback 回调函数 接受一个参数类型boolean 为是否展示该节点 !!!!!必传!!!!!! props-value 每个树节点用来作为唯一标识的属性整棵树应该是唯一的 !!!!!! !– templatediv classtreeDialogSelectComslot :valuevalue v-if\(slots.default/slotel-inputv-elsev-bind\)attrs:valuevalueFilter(value)suffix-iconel-icon-arrow-down:placeholder\(attrs[placeholder] || 请选择:clearable\)attrs[clearable] || trueclasstreeDialogSelectInputfocusopenclearselectClear()/el-inputel-dialog:visible.syncvisible:width\(attrs[width] || 50vw:append-to-bodytrue:close-on-click-modalfalse:close-on-press-escapefalse:title\)attrs[dialog-title] || 请选择div classtreeDialogBodyel-input placeholder输入关键字进行过滤 v-modelfilterText clearableslot slotprepend nameprepend/slot/el-inputdiv classtreeDialogBodyTreeel-treev-bind\(attrs:datadata:propspropsnode-clickhandleNodeClick:check-strictly\)attrs[check-strictly]:icon-class\(attrs[icon-class]:lazy\)attrs[lazy]:load\(attrs[load]:node-keyprops.value:filter-node-methodfilterNode:default-expanded-keysdefaultExpandedKeysrefmyTreetemplate slot-scope{ node, data }slot :nodenode :datadata nametreespan classslotSpani v-show!node.disabled filterText classel-icon-warning/ispanspan v-htmlsearchHighlightFilter(node, data)/spanb v-if\)attrs[show-count] ! undefined data[props.children]{{ data[props.children].length }}/b/span/span/slot/template/el-tree/div/divdiv classfooterel-button typeprimary plain clickselectClear()清 空/el-button/div/el-dialog/div /templateJS export default {props: {value: {type: undefined,default: null,},data: {type: Array,default: () new Array(),},props: {type: Object,default: () {return {label: label,value: value,children: children,};},},},data() {return {defaultExpandedKeys: [],visible: false,filterText: ,};},created() {this.propsInit();},mounted() {setTimeout(this.initData, 10);},beforeUpdate() {this.propsInit();this.initData();},methods: {open() {this.visible true;},initData() {let newItem this.recurrenceQuery(this.data, this.props.value, this.value);if (newItem?.length) {if (this.props.value newItem[0][this.props.value]) {this.defaultExpandedKeys [newItem[0][this.props.value]];}this.\(nextTick(() {if (this.\)refs.myTree?.setCurrentNode) this.\(refs.myTree.setCurrentNode(newItem[0]);});} else {if (this.data.length 1 this.\)attrs[expand-first-level] ! false) {this.defaultExpandedKeys [this.data[0][this.props.value]];}}this.\(forceUpdate();},// 单选事件handleNodeClick(data, e) {if (this.props.disabled e.disabled) {return false;} else {if (data[this.props.children] data[this.props.children]?.length) {return false;}}this.\)emit(input, data[this.props.value]);this.visible false;this.\(emit(change, data, e);},// 递归查找通用方法recurrenceQuery(list, key, value) {if (!list || !key || !value) return [];let queryData [];list.map(item {if (item[this.props.children] item[this.props.children].length) {queryData.push(...this.recurrenceQuery(item[this.props.children], key, value));}if (item[key] value) {queryData.push(item);}return item;});return queryData;},selectClear(flag) {if (!flag) {this.\)emit(input, );this.\(emit(change, null, null);}this.\)refs.myTree.setCurrentKey(null);this.remoteMethod();},getCheckedNodes() {if (this.value ! null this.value ! undefined this.value ! ) {return this.\(refs.myTree.getCheckedNodes();}return [];},getCurrentNode() {if (this.value ! null this.value ! undefined this.value ! ) {return this.\)refs.myTree.getCurrentNode();}return null;},valueFilter(val) {let res ;[res] this.recurrenceQuery(this.data, this.props.value, val);return res?.[this.props.label] || ;},propsInit() {this.props.label this.props.label || label;this.props.value this.props.value || value;this.props.children this.props.children || children;},remoteMethod(query) {this.\(refs.myTree.filter(query);},filterNode(value, data) {if (!value) return true;let result true;if (this.\)listeners.onFilter) {this.\(emit(onFilter, value, data, res {result res;});} else {result data[this.props.label].indexOf(value) ! -1;}return result;},searchHighlightFilter(node, data) {let { label } this.props;if (this.\)attrs[search-highlight] false) return data[label];if (!this.filterText) return data[label];const regex new RegExp(this.filterText, gi);let text data[label].replace(regex, match {return strong classhighlight\({match}/strong;});return text;},},watch: {value: {deep: true,handler(val) {if (!val) {this.selectClear(true);}},},filterText(val) {this.\)refs.myTree.filter(val);},}, }; CSS .selecTree {max-height: 50vh;overflow: auto;padding: 5px;::v-deep .el-tree-nodecontent {font-size: 14px;} } ::v-deep.slotSpan {font-size: 14px; i {color: #67c23a;margin-right: 5px;}b {font-weight: normal;font-size: 12px;color: #999;}.highlight {color: #67c23a;} }.treeDialogBody {max-height: 60vh;display: flex;flex-direction: column;::v-deep .el-inputvalidateIcon {display: none;}::v-deep .treeDialogBodyTree {flex: 1;overflow: auto;padding: 12px 8px;margin: 12px 0;background-color: #f5f7fa;border-radius: 5px;.el-tree {background: transparent;.el-tree-node__content:hover {background-color: #eaeef4;}}} } .footer {text-align: right; } 使用案例 templatetreeDialogSelectv-modeltreeDialogSelectVal:datatreeDialogSelectDatashow-count/treeDialogSelect /templatescript import treeDialogSelect from /components/treeDialogSelect; export default {components: { treeDialogSelect },data() {return {treeDialogSelectValue: ,treeDialogSelectData: [{id: 1,label: 一级 1,children: [{id: 4,label: 二级 1-1,children: [{id: 9,label: 三级 1-1-1,},{id: 10,label: 三级 1-1-2,},],},],},{id: 2,label: 一级 2,children: [{id: 5,label: 二级 2-1,},{id: 6,label: 二级 2-2,},],},{id: 3,label: 一级 3,children: [{id: 7,label: 二级 3-1,},{id: 8,label: 二级 3-2,},],},],};}, }; /script 使用文档  以下只列举主要属性与方法更多具体的属性配置请移步element官网进行查看。 属性 属性名类型默认值是否必传说明value / v-modelstring / number-是绑定值 props object 与element保持一致 否 配置选项具体配置可以参照element ui库中el-tree的配置 expand-first-level booleantrue否 当根节点只有一个时是否展开 search-highlight booleantrue否 是否开启搜索高亮仅在slot-tree未传入时生效 show-countbooleanfalse否若节点中存在children则在父节点展示所属children的数量注意但设置插槽时 show-count将失效 事件 事件名称说明回调参数 change 当选择项发生改变时触发共两个参数依次为当前节点的数据当前节点的 Node 对象 onFilter 当过滤框输入的值改变时触发 共三个参数依次为搜索框的值当前节点的数据回调函数callback 接受一个参数类型boolean表示是否展示该节点 插槽 name说明 - 页面展示的输入框slot如果传入默认插槽则会不显示默认el-input参数为 { value } prepend 弹窗中过滤文本框的顶部插槽 tree 自定义树节点的内容参数为 { node, data }