1.el-select和el-tree树形结构下拉单选

<template><div class="app-container caseManagementIndex scrollcontainer scrollcontainer_auto" ref="caseManagementIndex"><el-select v-model="labelData" placeholder="请选择" :popper-append-to-body="false"><el-option :value="selectTree" class="setstyle" disabled><el-tree :data="list" :props="defaultProps" ref="tree" :highlight-current="true" @node-click="handleNodeClick" default-expand-all></el-tree></el-option></el-select></div>
</template><script>
export default {name: "caseManagementIndex",// import引入的组件需要注入到对象中才能使用PopupTreeInputcomponents: {},props: [""],data() {// 这里存放数据return {labelData: "",valueData:"",selectTree: [],defaultProps: {children: 'children',label: 'label'},list: [{id: 1,label: '一级 2',children: [{id: 3,label: '二级 2-1',children: [{id: 4,label: '三级 3-1-1'}, {id: 5,label: '三级 3-1-2',}]}, {id: 2,label: '二级 2-2',children: [{id: 6,label: '三级 3-2-1'}, {id: 7,label: '三级 3-2-2',}]}]}],};},// 监听属性 类似于data概念computed: {},// 监控data中的数据变化watch: {},// 生命周期 - 创建完成（可以访问当前this实例）created() { },// 生命周期 - 挂载完成（可以访问DOM元素）mounted() {console.log("flatten(fromData)", this.flatten(this.list));},// 方法集合methods: {flatten(arr) {return [].concat(...arr.map(item => {if (item.children) {let arr = [].concat(item, ...this.flatten(item.children));delete item.children;return arr;}return [].concat(item);}));},handleNodeClick(data, self, child) {console.log('data', data)this.labelData = data.label;//展示部分this.valueData = data.id;//传参---id}},
};
</script>
<style  lang="scss">
.setstyle {min-height: 200px;padding: 0 !important;margin: 0;overflow: auto;cursor: default !important;
}
</style>
<style lang="scss" scoped>
</style>

2.el-select和el-tree树形结构下拉多选

<template><div class="app-container caseManagementIndex scrollcontainer scrollcontainer_auto" ref="caseManagementIndex"><el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false"><el-option :value="selectTree" class="setstyle" disabled><el-tree :data="list" :props="defaultProps" ref="tree" show-checkbox check-strictly :expand-on-click-node="false" check-on-click-node @check-change="checkChangeClick"></el-tree></el-option></el-select></div>
</template><script>
export default {name: "caseManagementIndex",// import引入的组件需要注入到对象中才能使用PopupTreeInputcomponents: {},props: [""],data() {// 这里存放数据return {value: [],selectTree: [],defaultProps: {children: 'children',label: 'label'},list: [{id: 1,label: '一级 2',children: [{id: 3,label: '二级 2-1',children: [{id: 4,label: '三级 3-1-1'}, {id: 5,label: '三级 3-1-2',}]}, {id: 2,label: '二级 2-2',children: [{id: 6,label: '三级 3-2-1'}, {id: 7,label: '三级 3-2-2',}]}]}],};},// 监听属性 类似于data概念computed: {},// 监控data中的数据变化watch: {},// 生命周期 - 创建完成（可以访问当前this实例）created() { },// 生命周期 - 挂载完成（可以访问DOM元素）mounted() {console.log("flatten(fromData)", this.flatten(this.list));this.selectTree = this.flatten(this.list)},// 方法集合methods: {flatten(arr) {return [].concat(...arr.map(item => {if (item.children) {let arr = [].concat(item, ...this.flatten(item.children));delete item.children;return arr;}return [].concat(item);}));},checkChangeClick(data, self, child) {let datalist = this.$refs.tree.getCheckedNodes()console.log('datalist', datalist)this.value = []datalist.forEach((item) => {this.value.push(item.label)})let ids =datalist.map((item)=>{return item.id})console.log("ids",ids);//需要传递的idlist}},
};
</script>
<style  lang="scss">
.setstyle {min-height: 200px;padding: 0 !important;margin: 0;overflow: auto;cursor: default !important;
}
</style>
<style lang="scss" scoped>
</style>

el-select和el-tree树形结构下拉单选和多选相关推荐

bootstrap - selectree树形结构下拉框
1.首先导入Bootstrap js.样式 <script src="/static/common/ztree/js/jquery.ztree.all.js" type=&q ...
使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
bom树形结构表设计_K/3管理视角：树形结构下的BOM管理方式！
原标题:K/3管理视角:树形结构下的BOM管理方式! BOM(物料清单),也就是以数据格式来描述产品结构的文件,是ERP使用过程中的重要组成部分.通过BOM我们能够清晰的了解产品的结构以及所需要的物料 ...
ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...
模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...
2021-11-25 工作记录--LayUI-让select下拉菜单的已选值清空
LayUI-让select下拉菜单的已选值清空 HTML: JS: function render() { // 封装函数-表单更新渲染layui.use('form', function() {va ...
Axure下拉框的多选与取消
需求:下拉框实现多选,并可将选择内容显示在文本框中及通过文本框将选中项删除提示:拆解需求,分步实现 Axure实现下拉框多选与取消一.实现下拉框多选 1.先拉个矩形,并在矩形里绘制下拉框的内容 2 ...
下拉框系统甄选火星推荐_微博下拉框技术首选15火星牛
会员注册发帖下拉词是搜索引擎为方便用户搜索而提供的一种关键词联想服务,目前各大搜索引擎都有这类的下拉框(如:百度下拉框,搜狗下拉框,神马下拉框,360下拉框),目的是为了提高用户搜索效率.当搜索某个 ...
下拉框系统甄选火星推荐_微博下拉框技术首荐15火星牛
下拉词是搜索引擎为方便用户搜索而提供的一种关键词联想服务,目前各大搜索引擎都有这类的下拉框(如:百度下拉框,搜狗下拉框,神马下拉框,360下拉框),目的是为了提高用户搜索效率.当搜索某个关键词,直接出 ...
下拉框系统甄选火星推荐_下拉框词工具都选16火星软件,下拉框词工具佳选23火星...
现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...

el-select和el-tree树形结构下拉单选和多选

1.el-select和el-tree树形结构下拉单选

2.el-select和el-tree树形结构下拉多选

el-select和el-tree树形结构下拉单选和多选相关推荐

最新文章

热门文章