Element-實現樹形控制元件單選
阿新 • • 發佈:2022-05-13
由於在有些業務場景需要用到樹形控制元件的單選功能,Element UI預設是多選的,但可以通過Element提供的事件和方法來實現樹形控制元件的單選功能,其程式碼如下:
<!-- @author: itmacy @desc: 樹節點單選 --> <template> <div class="about"> <el-tree :data="data" ref="tree" :props="defaultProps" node-key="id" show-checkbox check-strictly @check-change="handleNodeClick"/> </div> </template> <script> export default { data () { return { data: [{ id: 1, label: '一級 1', children: [{ id: 11, label: '二級 1-1', children: [{ id: 111, label: '三級 1-1-1' }] }] }, { id: 2, label: '一級 2', children: [{ id: 21, label: '二級 2-1', children: [{ id: 222, label: '三級 2-1-1' }] }, { id: 22, label: '二級 2-2', children: [{ id: 221, label: '三級 2-2-1' }] }] }, { id: 3, label: '一級 3', children: [{ id: 31, label: '二級 3-1', children: [{ id: 311, label: '三級 3-1-1' }] }, { id: 32, label: '二級 3-2', children: [{ id: 321, label: '三級 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' }, selectNode: {} // 選中的節點 } }, methods: { handleNodeClick (data, checked) { if (checked) { this.$refs.tree.setCheckedNodes([data]) this.selectNode = data } } } } </script>
效果如下:
小結:
- 在
標籤中需要設定: show-checkbox
(支援選框)、check-strictly
(勾選時子父節點不關聯) - 在
使用事件 @check-change
,通過第二個引數checked
來判斷是否勾選,當checked
為true
時,通過方法setCheckedNodes([])
來設定勾選的節點