<!-- author:XYG --> <!-- title:系统树机构 --> <template> <div> <div style=" 30%;float: left;"> <el-form :data="options"> <!-- <el-form-item label="父类名称:"> --> <el-select v-model="nodeName" placeholder="请选择父类" ref="mySelect"> <el-option :value="nodeCode" style="height: auto;"> <el-tree :data="treeData" node-key="pCode" default-expand-all :expand-on-click-node="false" ref="tree" :props="Props" @node-click="nodeClick" @check-change="checkChange"> </el-tree> </el-option> </el-select> <!-- </el-form-item> --> </el-form> </div> </div> </template> <script> import { queryZiDianP //获取字典表全部数据 } from "@/api/aqtc/jbshz/xitongfenlei/xtflList.js"; //js路径;@代表src export default { data() { return { nodeName: '',//用来接树里选中的PCode nodeCode: '',//用来接树里选中的PName treeData: [], // 默认选中值 selected: '0001', // 数据默认字段 Props: { label: 'PName', // 标签显示 children: 'children', // 子级 }, // 后台传来的字典表数据列表 options: [] } }, mounted() { this.queryZDPList(this.parseData); //查询字典表给options;这里调用方法没this就会报is not defined }, methods: { //树 start parseData(resData) { this.treeData = []; this.treeData.push({"PName":"顶级分类","PCode":"0"}); if (resData != null && resData.length > 0) { for (var node of resData) { //找父节点 if (node.ParentDM == '0') { node['children'] = this.childNodes(node.PCode, resData); //给node定义一个属性children this.treeData.push(node); } } } console.log(this.treeData) }, childNodes(rootDM, resData) { var childNodes = []; for (var childNode of resData) { //找子节点 if (childNode.ParentDM == rootDM) { childNode['children'] = this.childNodes(childNode.PCode, resData); childNodes.push(childNode); } } return childNodes; }, //树 end nodeClick(node) { // console.log("nodeClick:"); let no = Object.keys(node); //取object的key let pp = "Pname"; let code = node[pp]; //取object的value this.nodeName = node.PName; this.nodeCode = node.PCode; console.log(this.nodeName); console.log(this.nodeCode); }, checkChange() { console.log("checkChange:"); var node = this.$refs.tree.getCheckedNodes(); console.log(node); }, //查询字典表 queryZDPList(callBack) { // this.$options.methods.getTokens.bind(this)();//掉获取token的方法 queryZiDianP().then(response => { console.log(response); callBack(response.response); console.log("this.options:"); console.log(this.options); }) .catch(erro => { this.$message({ type: "info", message: "字典表查询失败!" }); }); }, }, } </script> <style> </style>