vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用

更新時(shí)間：2022年09月16日 09:00:41 作者：GarenWang

這篇文章主要介紹了vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue+elementUI組件tree單選加條件禁用

elementUI tree：http://element.eleme.io/#/zh-CN/component/tree

官方給出的API還是挺全的，但是示例木有給全，有幾個(gè)API的說明也不是很能理解～

tree實(shí)現(xiàn)帶選擇框的要加上node-key="id" show-checkbox兩個(gè)屬性，

<el-tree ref="tree2" :data="data2" :props="defaultProps" class="filter-tree" node-key="id" show-checkbox />

但是要單選呢？！組件默認(rèn)如果選中了父節(jié)點(diǎn)，相應(yīng)的子節(jié)點(diǎn)也會(huì)被選中，要切斷關(guān)聯(lián)，那就要加check-strictly這個(gè)屬性，默認(rèn)是false，props形式傳入設(shè)置成true即可～

組件還提供了設(shè)置勾選的節(jié)點(diǎn)的方法setCheckedKeys，參數(shù)接收節(jié)點(diǎn)的key，已數(shù)組的形式傳入

this.$refs.tree2.setCheckedKeys([3]);

有個(gè)設(shè)置的方法，還需要一個(gè)觸發(fā)的事件以及當(dāng)前選中的節(jié)點(diǎn)數(shù)據(jù)，剛好API有個(gè)check事件，啊！瘋狂點(diǎn)贊中～

此方法會(huì)傳遞兩個(gè)參數(shù)，node是當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)，data選中狀態(tài)的詳情數(shù)據(jù)，使用如下：

<el-tree ref="tree2" :data="data2" :props="defaultProps" node-key="id" show-checkbox :check-strictly="true" @check="checkFn" />
 
checkFn(node, data) {
    console.log(11111, node, data);
    let checkedKeys = data.checkedKeys;
	let currKey = node.id;
	this.$refs.tree2.setCheckedKeys([currKey]);
}

使用如上方法就可以完成實(shí)現(xiàn)單選

禁用的話，組件提供了props設(shè)置disabled，

可以直接以布爾形式設(shè)置，也可以函數(shù)返回值的形式設(shè)置，下面給出兩種設(shè)置方法的代碼～

1. 以布爾形式設(shè)置，需要在節(jié)點(diǎn)數(shù)據(jù)里加上disabled屬性；

<el-tree
  :data="data3"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]">
</el-tree>
 
<script>
  export default {
    data() {
      return {
        data3: [{
          id: 1,
          label: '一級(jí) 2',
          children: [{
            id: 3,
            label: '二級(jí) 2-1',
            children: [{
              id: 4,
              label: '三級(jí) 3-1-1'
            }, {
              id: 5,
              label: '三級(jí) 3-1-2',
              disabled: true
            }]
          }, {
            id: 2,
            label: '二級(jí) 2-2',
            disabled: true,
            children: [{
              id: 6,
              label: '三級(jí) 3-2-1'
            }, {
              id: 7,
              label: '三級(jí) 3-2-2',
              disabled: true
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

2. 以函數(shù)返回值的形式設(shè)置，disabled函數(shù)會(huì)返回當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)，return一個(gè)狀態(tài)回去就OK～

<el-tree
  :data="data3"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]">
</el-tree>
 
<script>
  export default {
    data() {
      return {
        data3: [],
        defaultProps: {
          children: 'children',
          label: 'label',
          disabled: this.disabledFn,
        }
      };
    },
    methods: {
        /**
         * disabled函數(shù)
         */
        disabledFn(data, node) {
            // console.log("disabled函數(shù): ", data, node);
            if (!data.isAggregation) {  // 根據(jù)自己的節(jié)點(diǎn)數(shù)據(jù)條件設(shè)置判斷，我只提供了個(gè)參考
                return true;
            } else {
                return false;
            }
        },
    }
  };
</script>

完結(jié)！付上一個(gè)完成的代碼～

<template>
	<div class="app-container">
		<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
		<el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" default-expand-all node-key="id" show-checkbox :check-strictly="true" @check="checkFn" />
	</div>
</template>
 
<script>
export default {
    data() {
        return {
            filterText: "",
            data2: [
                {
                    id: 1,
					label: "Level one 1",
					disabled: true,
                    children: [
                        {
                            id: 4,
                            label: "Level two 1-1",
                            children: [
                                {
                                    id: 9,
                                    label: "Level three 1-1-1"
                                },
                                {
                                    id: 10,
                                    label: "Level three 1-1-2"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    label: "Level one 2",
                    children: [
                        {
                            id: 5,
                            label: "Level two 2-1"
                        },
                        {
                            id: 6,
                            label: "Level two 2-2"
                        }
                    ]
                },
                {
                    id: 3,
                    label: "Level one 3",
                    children: [
                        {
                            id: 7,
                            label: "Level two 3-1"
                        },
                        {
                            id: 8,
                            label: "Level two 3-2"
                        }
                    ]
                }
            ],
            defaultProps: {
                children: "children",
                label: "label",
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree2.filter(val);
        }
    },
 
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        checkFn(node, data) {
			console.log(11111, node, data);
			let checkedKeys = data.checkedKeys;
			let currKey = node.id;
			this.$refs.tree2.setCheckedKeys([currKey]);
        }
    }
};
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: