佛山网站建设推广订做,国外企业档案馆网站的特色,crm外贸管理软件,网络公司网站源码下载需求#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
