天天看點

Ant-vue 樹形元件a-tree勾選時隻能單選

template:

<a-tree
    v-if="treeData.length"
    :checkable="true"
    v-model="checkedSiteId"
    :checkStrictly="true"
    :tree-data="treeData"
    defaultExpandAll
    ref="treeForm"
    :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
    @check="handleNodeClick">
</a-tree>      

js:

data(){
    return:{
        //樹結構:和上面的replaceFields變量内容大緻對應
        treeData: [
            {
                children: [
                    {
                        id: "1198908685567560144"
                        statu: undefined
                        title: "A站"
                    },
                    {
                        id: "11984789756097817201"
                        statu: undefined
                        title: "123"
                    }
                ],
                disabled: true
                id: -1
                title: "所有站點"
            }
        ],
        checkedSiteId: [],
    }
}

methods: {

    //a-tree 單選模式
    handleNodeClick(checkedKeys) {
       console.log(checkedKeys);
     this.checkedSiteId = [].concat(checkedKeys.checked[checkedKeys.checked.length - 1]);
       // this.checkedSiteId = [];
       // this.checkedSiteId.push(checkedKeys.checked[checkedKeys.checked.length - 1]);
       this.$nextTick(() => {
           if (this.checkedSiteId.length > 0) {
               this.siteActiveName = 'first';
               this.getPlantInfo(this.checkedSiteId.join(',')); //查詢站點資訊
           } else {
               return this.$message.info('請選擇項目進行查詢');
           }
       });
     },
},

mounted(){
     _this.checkedSiteId = [];
     _this.checkedSiteId.push(1198908685567560144);//預設選中A站
}      

效果:

        圖(1)

Ant-vue 樹形元件a-tree勾選時隻能單選

        圖(2)

Ant-vue 樹形元件a-tree勾選時隻能單選

注意:

繼續閱讀