vue treeselect獲取當前選中項的label例項
阿新 • • 發佈:2020-09-02
我就廢話不多說了,大家還是直接看程式碼吧~
<treeselect :placeholder="$t('taskManage.lockTask.selDeptId')" :options="deptTree" :normalizer="normalizer" v-model="formData.deptId" @select="selectDepart"> </treeselect>
// 獲取當前選中部門的名稱 selectDepart(val) { console.log('selectDepart',val) this.formData.deptName = val.name }
結果如下所示,可以獲取到當前選中項的資訊:
補充知識:vue中element-ui 樹形控制元件-樹節點的選擇(選中當前節點,獲取當前id並且獲取其父級id)
Element-ui官網給的方法
getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); },
這種只有在所有子級都被選中的情況下才能獲得父級的id,如果不選中所有的子級那麼獲取得到的id就只有子級的。但是一般提交資料時後臺都需要父級id的。
有兩種方法解決:
1,找到專案中的\node_modules\element-ui\lib\element-ui.common.js檔案
2,搜尋檔案中的TreeStore.prototype.getCheckedNodes方法中的
if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) { checkedNodes.push(child.data); }
3,修改為
if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) { checkedNodes.push(child.data); }
4,然後重啟專案
console.log(this.$refs.tree.getCheckedKeys());就可以拿到父節點的ID啦
第二種方法:複製程式碼
程式碼:要有pid:xxx
methods: { getCheckedNodes() { var rad='' var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 獲取當前的選中的資料[陣列] -id,把陣列轉換成字串 var ridsb = this.$refs.tree.getCheckedNodes()// 獲取當前的選中的資料{物件} ridsb.forEach(ids=>{//獲取選中的所有的父級id rad+=','+ids.pid }) rad=rad.substr(1) // 刪除字串前面的',' var rids=rad+','+ridsa var arr=rids.split(',')// 把字串轉換成陣列 arr=[...new Set(arr)]; // 陣列去重 rids=arr.join(',')// 把陣列轉換成字串 console.log(rids) } }
測試程式碼
<template> <div> <el-tree :data="data2" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"> </el-tree> <div class="buttons"> <el-button @click="getCheckedNodes">獲取</el-button> <el-button @click="resetChecked">清空</el-button> </div> </div> </template> <script> export default { methods: { getCheckedNodes() { var rad='' var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 把陣列轉換成字串 console.log(rids) },resetChecked() { this.$refs.tree.setCheckedKeys([]); } },data() { return { data2: [{ pid:0,path:xxxx,id: 1,label: '一級 1',children: [{ pid:1,id: 11,label: '二級 1-1' },{ pid:1,id: 12,label: '二級 1-2' },id: 13,label: '二級 1-3' }] }],defaultProps: { children: 'children',label: 'label' } }; } }; </script> </script> <style scoped> </style>
如果是三級或者是多級,響應的資料格式必須要有'path:xxxx',這樣才能獲取其父級id
響應的資料格式
{ "data": [ { "id": 30,"path": xxxx,"children": [ { "id": 101,"children": [ { "id": 104,"children": [ { "id": 105,"path": xxxx } ] } ] } ] } ],"meta": { "msg": "獲取成功","status": 200 } }
這裡是引用~
以上這篇vue treeselect獲取當前選中項的label例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。