element-ui之el-select下拉选择器树形选择器的使用方法,由于官方案例比较麻烦,而且说明也比较少,新手拿来还要研究一下,我用完后直接给简化了,复制去直接可以用,吧字段含义简单阐述一下,直接上代码吧
HTML代码
<el-select clearable ref="selectTree" v-model="value" placeholder="请选择" popper-class="popperTreeSelect">
<el-option :value="value" :label="value">
<el-tree
ref="tree"
:data="data"
default-expand-all
:props="defaultProps"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
{ node.label }}</span>
</span>
</el-tree>
</el-option>
</el-select>
</template>
defaultProps:默认参数配置,children参数,你子集的参数名,比如你后台返回的子集是child,那这个参数值就写child,label参数,当前层级绑定的唯一值,案例上绑的是label,我们开发一般是绑id,这个根据自己的参数来定
node.label,下拉选项显示的内容,一般开发中就是name,也就是案例中的label值
最后说一下handleNodeClick方法,this.value就是显示选中的值,这里和单选下拉不一样,绑定的不是id,其实可以理解为下拉是模拟的,选中后选中值需要我们自己去存一下,页面中只是显示了选中的名称,id并没有记录,所以这里的value是字符串,初始化默认值直接给文字就行,例如’三级 1-1-1’,这样, this.$refs.selectTree.blur();这里其实就是一个选择事件,不用管,
下面是我自己修改后的方法,仅供产考:我这里的需求是如果有下级单位,就必须选择到最后一级,所以加了一个判断if (data.child.length > 0) return;如果你们的需求是任何一级都可以选择,把这个去掉即可
handleNodeClick(data, node, b) {
if (data.child.length > 0) return;
this.form.selectName = data.name;
this.form.selectId = data.id;
this.value = data.name;
this.$refs.selectTree.blur();
},
js代码
export default {
data() {
return {
data: [{
label: '一级 1',
orgType: '1',
children: [{
label: '二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1',
orgType: '2',
children: [{
orgType: '3',
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
orgType: '1',
children: [{
orgType: '2',
label: '二级 2-1',
children: [{
orgType: '3',
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
orgType: '2',
children: [{
orgType: '3',
label: '三级 2-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
value: ''
}
},
methods: {
handleNodeClick(data,node,b) {
this.value = data.label;
this.$refs.selectTree.blur();
console.log(data);
console.log(node);
console.log(b);
console.log('dddddddd', this.$refs.tree.getCheckedNodes());
}
}
}
如果有什么不懂得,欢迎在下面留言,本意是记录一下自己以后用的时候方便找,如果可以帮到大家就更好了!你学废了吗?