招聘网站建设人员的要求,网站设计就业前景分析,wordpress旋转,西安网站建设报价需求#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
