el-select结合el-tree做多选树下拉框选择器

置顶 swagLi

已于 2022-10-17 14:42:48 修改

阅读量2k

点赞数

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： vue.js elementui javascript

于 2022-06-06 11:03:05 首次发布

本文链接：https://blog.csdn.net/qq_41149508/article/details/125142490

版权

vue、elementUI、音视频通信、echarts实战专栏收录该内容

22 篇文章 42 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

前言：现在有个需求需要做个下拉框选择但是树状结构、所以单一的el-select、el-tree不能满足、当然也尝试过vue-treeselect但实践过程中发现有局限性，所以就用el-select结合el-tree封装

<templete>
  <el-select  placeholder="请选择巡检区域"  v-model="huixianname" clearable @clear="handleClear" ref="selectUpResId" style="width:100%">
        <el-option hidden :key="1"></el-option><!--这个必不可少否则显示不出来下拉数据-->
	    <el-tree :data="options"  node-key="id"  default-expand-all
	       :props="defaultProps"  :default-checked-keys="huixianarr"
	       @check="handleNodeClick"
	       show-checkbox ref="treeForm">
	    </el-tree>
 </el-select>
</templete>
<script>
export default{
    data(){
        return{
            huixianname:'',
            huixianarr:[],//用于回显选中的数据
            ids:'',//后台需要的参数id