Ant-vue 树形组件a-tree勾选时只能单选

Posted 2021-09-29 尔嵘

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）

        图（2）

注意：

1.在vue中，针对于组件的操作定义方法时候，不需要带方法后面带（）；而针对于Ant-vue这类的组件所定义的方法不传参数不需要在方法名后面带（）,他们默认是带参数的。比如本实例中的handleNodeClick(checkedKeys)，打印如下：