treeSelect組件對于一些屬性官方文檔沒有詳細說明踩坑

勾選效果圖：

搜索效果圖：

html:

<a-tree-selectclass="treeinput"v-model="form.codeSchemeId":dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"placeholder="請選擇"tree-checkable:tree-data="SaveCodeList"showSearchlabelInValuetreeNodeFilterProp="schemeName":filterTreeNode="fillterFUN"><templateslot="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) => {//這個是所有勾選的值idform.codeSchemeId.push(item.value)})}

踩坑點：

1.搜索時使用treeNodeFilterProp是沒有效果的，改treeNodeFilterProp屬性值能對使用replaceFields有效， 所以我這邊使用filterTreeNode屬性進行搜索 2.設置labelInValue勾選時才是保存鍵值對并且回顯在selecttree值是正確的 3.想使用插槽slot一定不能同時使用replaceFields 以上官方文檔沒有詳細說明，真是坑

總結

以上是生活随笔為你收集整理的ant design vue 1.7.8版本treeSelect组件坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。