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