网站设计机构有哪些,做产品网站营销推广,承德网站建设制作,阿里云的网站接入方式需求#xff1a;
1. 进入页面#xff0c;默认选中需要的节点#xff0c;并展开做出高亮效果#xff0c;其他时候点击箭头图标才展开。
2. input框搜索树节点
代码#xff1a; el-asideclassaside flex-shrink-0 bg-whitestylewidth:300px;height…需求
1. 进入页面默认选中需要的节点并展开做出高亮效果其他时候点击箭头图标才展开。
2. input框搜索树节点
代码 el-asideclassaside flex-shrink-0 bg-whitestylewidth:300px;height: 100%;divel-inputv-modelfilterTextclassfilterInputplaceholder请输入单位名称关键字clearable/div classproblem-orgTreeel-treerefdeptTree:datadeptOptions:propsdefaultPropsaccordion:filter-node-methodfilterNodehighlight-currentnode-keyid:expand-on-click-nodefalse:default-expanded-keysdefaultShowKeysnode-clickhandleNodeClick//div/div/el-aside script
export default {data() {return {deptOptions: [],defaultProps: {children: children,label: label,},defaultShowKeys: [],filterText: , // 搜索文本belongdCompId: , // 选中的树节点id}},watch: {filterText(val) {this.$refs.deptTree.filter(val);},},mounted() {if (this.$route.query.deptId) {this.belongdCompId this.$route.query.deptId;}},methods: {getTreeselect() {// 调用接口获取树结构treeselectOnlyOrg().then((response) {this.deptOptions response.data;this.$nextTick(() {// 高亮选中的节点this.$refs.deptTree.setCurrentKey(this.belongdCompId);// 默认展开this.defaultShowKeys.push(this.belongdCompId);});});},// 筛选filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) ! -1;},// 节点单击事件handleNodeClick(data) {this.belongdCompId data.id;},}
}
/script
style langscss
.problem-orgTree {padding-right: 5px;padding-bottom: 10px;// 超出换行.el-tree {.el-tree-node {white-space: normal;outline: 0;}.el-tree-node__content {height: 100% !important;word-break: break-all !important;white-space: pre-wrap !important;word-wrap: break-word !important;}.el-tree-node__label {word-break: break-all !important;white-space: pre-wrap !important;word-wrap: break-word !important;}}// 高亮选中.el-tree--highlight-current .el-tree-node.is-current .el-tree-node__content {color: #006569;}
}/style
