ant design vue 1.7.8版本treeSelect组件坑

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组件坑相关推荐

Vue - Ant Design Vue 中＜a-select＞选择器组件，既可从下拉列表选择，又可输入手动输入文本（既可下拉选择又可自己输入）
前言网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示既可下拉选 ...
Ant Design Vue 相关介绍
Ant Design Vue有三个版本: v1(基于vue2.x):https://www.antdv.com/docs/vue/introduce-cn/ v2(基于vue3.x):https:// ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...
ant design vue 的 description组件中 label 默认样式的更改
这两天做项目,需要实现一个如下图的效果于是我就去 ant design vue 里面找,发现 description 组件符合这个效果但是写完之后我发现,这个组件的 label 并不能修改样式啊, ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
ant design vue 组件 Tree
ant design vue 组件 Tree 实现效果: 实现代码: <div class="tree"><a-treeshow-iconshow-line:lo ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...

ant design vue 1.7.8版本treeSelect组件坑

html:

javascript:

Css

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

踩坑点：

ant design vue 1.7.8版本treeSelect组件坑相关推荐

最新文章

热门文章