elementUI的级联选择器el-cascader

使用

1、级联选择器动态加载

关于字典的数据我放在了mixins中
使用的组件

<el-form-item label="所有者">
  <el-cascader :props="props" ref="owner" :placeholder="form.createName" @change="getOwner" :show-all-levels="false" style="width:100%"></el-cascader>                
</el-form-item>

import { ehrperson } from "@/mixins/paramlist"

mixins: [ ehrperson ], 
// 获取选中叶子节点的值
getOwner (node) {      
  let tempObj = this.$refs.owner.getCheckedNodes()[0]
  this.form.createName = tempObj.label
  this.form.createId = tempObj.value      
},

mixins/paramlist.js
下面是调取公司，然后循环调用公司下的部门，当没有部门后则调取部门人员

import api from "@/servers/api"
// ehr所有人员
export const ehrperson = {
  data () {
    return {
      props: {
        lazy: true,
        lazyLoad:this.cascaderLazyLoad        
      },
    }
  },
  methods: {
    cascaderLazyLoad (node, resolve) {      
      if (!node) {
        return false
      }
      const { level } = node;
      if (level === 0) {        
        let url = `?strDetail=true`
        api.ehrManage.companyNew(url).then(res => {           
          if (res.status == 200) {
            resolve(
              res.data.map((val) => {
                return {
                  value: val.id,
                  label: val.name,
                  leaf: false
                };
              })
            );
          }         
        })
      }else if (level >= 1) {        
        const orgId = node.data.value;
        if (!orgId) return resolve();        
        api.ehrManage.departmentAgain({orgId}).then(res => {                    
          if (res.status == 200) {
            if (res.data.length != 0) {
              resolve(
                res.data.map((val) => {
                  return {
                    value: val.id,
                    label: val.name,
                    leaf: false
                  };
                })
              );  
            }else {
              api.ehrManage.personnel({orgId}).then(res => {                            
                if (res.status == 200) {
                  resolve(
                    res.data.map((val) => {
                      return {
                        value: val.me.personId,
                        label: val.me.person.nameOriental ? val.me.person.nameOriental : val.me.person.surnameOriental ? val.me.person.surnameOriental : '',
                        leaf: true
                      };
                    })
                  );                      
                }
              })
            }             
          }
        })
      }            
    },
  }
}

问题

1、clearCheckedNodes()方法如何使用

this.$refs.cascader.$refs.panel.clearCheckedNodes() // 清空选中节点
this.$refs.cascader.$refs.panel.activePath = [] // 清空高亮  

2、回显
回显使用了placeholder 然后改了下样式

.wrap-content /deep/ .el-cascader .el-input .el-input__inner::-webkit-input-placeholder{
  color: #606266;
}

网站导航

网站导航