前言:终于找到你,还好我没放弃,经过了接近一天的苦思冥想,以及不懈的寻找,终于将这个问题解决掉,那种心情只有有过这种经历的才能体会。话不多说,给兄弟们上福利。
1. 实现效果
随便点击 图一 一个选项,然后出现图二更多操作
图一
图二
效果是不是很简单,实现起来也不难,(_)
2. 实现方法
这个难实现有三点:
①将 select选择框放入render里面
② render
函数,通过常规的写法,函数无法获取到 $ref
值
③ 去触发清空单选项的方法
{
align: 'center',
title: '操作',
width: 170,
render: (h, params) => {
let create = this.$createElement
let dom = create('Select', {
ref: 'selectText' + params.index,
props:{
clearable: true,
placeholder:'更多操作',
transfer: true,//不受表格高度影响
},
style:{
width: '75%',
},
on: {
'on-change':(event) => {
this.upDate(event, params);
},
'on-open-change':(event) =>{
this.changeSelectContext(event);
}
},
},
[
h('Option',{
props: {
value: 2,
}
},'上移'),
h('Option',{
props: {
value: 3,
}
},'下移'),
]
);
return dom;
},
changeSelectContext(event){
if (!event) {
this.$refs.selectText2.clearSingleSelect();
this.$refs.selectText3.clearSingleSelect();
}
},
3. 详解
- 查询官网
官网地址 http://iviewui.com/view-ui-plus/component/form/select
千万不要找到下拉框,咱们这是选择器,😀
相信好多小伙伴都对这个方法恨得牙痒痒了😀,有很多都是介绍使用此方法进行处理,就是处理不了咱们的情况。
这个方法确实可以解决我们的问题,但是就是获取不到 this.$refs
的值,其实这是因为 h
组件造成的,使用此组件无法获取到,然后改成上面代码的方式就可以获取到了
因为 select
是多个选项,每个选项都要生成一个 ref
,所以要每个都获取到,'selectText' + params.index,
使用此方式就获取全部。
然后,可以将 this.$refs
打印出来,将与 select选择框
相关的都要使用 clearSingleSelect()
方法,到这里问题就得到了结局。
如果下拉框有很多个,或者不确定有多少个,就要打印出来看看规律,然后在操作。
- 注意事项
其他方法 on-change
、on-open-change
,在官网上都有详细介绍,参照官网
属性 props
下面的clearable
注意一定要写出来,赋值为 true
,要不上面清空单选项方法是无法使用的。
-
解决方案参考地址
https://segmentfault.com/q/1010000015595702