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
以上官方文档没有详细说明,真是坑