Element-ui级联选择器(级联)


<el-cascader
class="ipt"
clearable
v-model="section_id"
:props="props"
ref="tree"
@expand-change="getCheckedNodes"
@change="changeCascader"
:placeholder="getCheckedNodesValue"
></el-cascader>
 data() {
 let _self = this
 return {
getCheckedNodesValue: '', //级联单选展示内容
props: {
lazy: true,
checkStrictly: true,
lazyLoad(node, resolve) {
const { value } = node
let id = node.value
let postData = {
page: 1,
page_size: 999,
type: 0, //部门列表传0 子账号关联传1
pid: id, //部门id 根部门传0
}
// console.log(node, 'node');
// console.log(value, 'level');
// console.log(resolve,'resolve')
 _self.$axios
.post('/brandapi/Staff/getSectionList', postData)
.then(({ data }) => {
console.log(data, '获取部门')
let nodes = data.data.data.map((item) => {
return {
value: item.id,
label: item.section_name,
// leaf: value >= 2
}
})
resolve(nodes)
 })
},
},
}
},



// // 单个选中
    getCheckedNodes(e) {
      // console.log(e, 'eee');
      let activeArr = this.$refs.tree._self.panel.$data.activePath
      let itmeName = ''
      activeArr.forEach((item) => {
        itmeName += item.label + '  '
      })
      // console.log(activeArr, '777');
      this.section_id = activeArr[activeArr.length - 1].value
      this.getCheckedNodesValue = itmeName
      console.log(this.section_id, ' this.section_id')
      // console.log(this.getCheckedNodesValue, ' this.getCheckedNodesValue');
    },

  

 // 级联选中
        changeCascader(e) {
            // console.log(e);
            // if (e.length > 0) {
            //     this.category_id_1 = e[0];
            // } else {
            //     this.category_id_1 = '';
            // }
            // if (e.length > 1) {
            //     this.category_id_2 = e[1];
            // } else {
            //     this.category_id_2 = '';
            // }
            // if (e.length > 2) {
            //     this.category_id_3 = e[2];
            // } else {
            //     this.category_id_3 = '';
            // }
            // console.log(this.category_id_1, this.category_id_2, this.category_id_3);
        },

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM