ant design vue 1.7.8版本treeSelect组件坑

treeSelect组件对于一些属性官方文档没有详细说明踩坑

勾选效果图：

搜索效果图：

html:

     <a-tree-select
         class="treeinput"
         v-model="form.codeSchemeId"
         :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
         placeholder="请选择"
         tree-checkable
         :tree-data="SaveCodeList"
         showSearch
         labelInValue
         treeNodeFilterProp="schemeName"
         :filterTreeNode="fillterFUN"
       >
         <template
           slot="title"
           slot-scope="{ versionNum, schemeName, remark, schemeId }"
           class="titleSchem"
         >
           <a-tooltip>
             <template slot="title">
               <span>{{ schemeName }}</span>
             </template>
             <div style="width: 26%" v-if="schemeId != '-1'">{{ schemeName }}</div>
             <div style="width: 26%" v-if="schemeId == '-1'" class="titleSchem">{{ schemeName }}</div>
           </a-tooltip>
           <a-tooltip>
             <template slot="title">
               <span>{{ versionNum }}</span>
             </template>
             <div style="width: 15%" v-if="schemeId != '-1'">{{ versionNum }}</div>
             <div style="width: 15%" v-if="schemeId == '-1'" class="titleSchem">{{ versionNum }}</div>
           </a-tooltip>

           <a-tooltip>
             <template slot="title">
               <span>{{ remark }}</span>
             </template>
             <div v-if="schemeId != '-1'">{{ remark }}</div>
             <div v-if="schemeId == '-1'" class="titleSchem">{{ remark }}</div>
           </a-tooltip>
         </template>
       </a-tree-select>

javascript:

data(){
	return{
		//treeselect勾选的值
		form:{
			 codeSchemeId: [], 
		},
		//treeselect的下拉内容
		SaveCodeList:[],
	}
},
methods:{
	 //treeselect搜索事件
    fillterFUN(searchVal, treeNode) {
      return treeNode.data.props.schemeName.includes(searchVal)
    },
        //查询编码方案
    modeManageMent() {
      const iten = {}
      this.keyword != '' ? (iten.keyword = this.keyword) : '',
      //这里是调后端接口返回的
        schemeEnableList(iten)
          .then((res) => {
          //加一个行头标题栏
            const SaveCodeList = [
              {
                schemeId: '-1',
                schemeName: '编码方案名称',
                remark: '描述',
                versionNum: '版本编号',
                value: '-1',
                scopedSlots: { title: 'title' },
                disabled: true,//这里设置禁止勾选是为了效果像table标题
              },
            ]
            //如果已勾选的则不加入treeselect里，用于编辑回显数据使用
            const NewSaveCodeList = res.data.filter(
              (item) => !this.tableModelform.codeSchemeId.some((ele) => ele === item.schemeId)
            )

            NewSaveCodeList.forEach((item) => {
            //把值额外赋值到value是为了搜索和勾选显示值用的（schemeId是数据对象的唯一id）
              item.value = item.schemeId
              //把值额外赋值到scopedSlots 是为了插槽显示如table列表一样的效果
              item.scopedSlots = { title: 'title' }
              SaveCodeList.push(item)
            })
            this.SaveCodeList = SaveCodeList
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
    },
}

Css

.treeinput {
  width: 100%;
  line-height: 35px;
  overflow: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.ant-select-tree-title {
  display: flex;
  display: -webkit-flex; /* Safari */
  > div {
    width: 59%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
  }
}
.titleSchem {
  background-color: #ececec;
  line-height: 33px;
  font-weight: 600;
}

勾选后获取所有勾选的值：

 const form = {codeSchemeId:[]}
 if (this.form.codeSchemeId.length) {
         this.form.codeSchemeId.forEach((item) => {
         //这个是所有勾选的值id
           form.codeSchemeId.push(item.value)
         })
    }

踩坑点：

1.搜索时使用treeNodeFilterProp是没有效果的，改treeNodeFilterProp属性值能对使用replaceFields有效，
所以我这边使用filterTreeNode属性进行搜索
2.设置labelInValue勾选时才是保存键值对并且回显在selecttree值是正确的
3.想使用插槽slot一定不能同时使用replaceFields
以上官方文档没有详细说明，真是坑