封装element的单选el-tree和el-select(树只允许两层)
1、html代码
几个点:1:className是一个特殊设置的类名,用作有多个并存时回显title使用
2:popper-class是设置下拉树类名的,下拉框的内容因为是在html上所以被这个类名包裹着。
<div class="tag_tree_select" :class="className">
<el-select v-model="repeatedValue" @clear="clearRepeatedId" clearable popper-class="tag_tree"
ref="repeatedElSelect" @visible-change="repeatedIdVisible">
<el-option v-for="item in trees" :key="item.id" :label="item.name" :value="item.id">
<el-tree :data="repeatedIdList" ref="repeatedTree" :class="haveTree ? 'have-tree' : ''"
v-if="isReloadRepeatedId" :default-expanded-keys="expandList" :props="props" node-key="id"
:highlight-current="true" @node-click="handleRepeatedClick">
</el-tree>
</el-option>
</el-select>
</div>
2、js代码
return Vue.extend({
props: {
allSelectList: {
type: Array
},
selectInitData: {
type: Number
},
repeatedDetail: {
type:String
},
className:{
type:String,
default:'repeated-title-class'
}
},
data: function () {
return {
repeatedId:null,
repeatedValue: '',//重复咨询回显
props: {
label: 'name'
},
isReloadRepeatedId: false,//还原下拉框
trees: [
{
}
],
props: {
label: 'name'
},
expandList: [],
nodeId: null,
haveTree: false,
}
},
created() {
},
mounted