iview表格通过render放置Select下拉框，操作完成清空单选项

最新推荐文章于 2023-04-25 15:34:01 发布

原创最新推荐文章于 2023-04-25 15:34:01 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#view design

文章介绍了在Vue.js中如何在表格中动态渲染Select选择框并实现清除单选功能。关键在于将select放入render函数中，通过创建ref并结合on-change和on-open-change事件处理方法，以及使用clearSingleSelect()方法来清除单选项。在处理多个选择框时，需要注意ref的命名和动态获取。

前言：终于找到你，还好我没放弃，经过了接近一天的苦思冥想，以及不懈的寻找，终于将这个问题解决掉，那种心情只有有过这种经历的才能体会。话不多说，给兄弟们上福利。

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