view-ui-plus iView Vue 3 table 自定义输入筛选条件

使用自定义表格头实现筛选：为何和如何

在使用 view-ui-plus（iView 的 Vue 3 版本）时，发现原生的表格组件不支持自定义输入筛选条件

为什么要使用自定义表格头？

原生组件的限制

view-ui-plus 的表格组件提供了基本的功能，但在原生实现中，对于复杂的筛选条件或输入框的支持较为有限。原生的筛选功能通常依赖于简单的下拉选择或预定义的筛选选项，这在处理自定义需求时显得不够灵活。

实现自定义筛选功能

下面是一个使用自定义表格头实现筛选的示例代码：

{
    title: '标题',
    key: 'taskCount',
    width: 200,
    renderHeader: (h, { column }) => {
      return h('div', { style: { display: 'flex', alignItems: 'center' } }, [
        h(
          'span',
          {
            style: {
              marginRight: '8px',
              cursor: 'default' // 默认光标样式
            },
            on: {
              mouseenter: (event) => {
                event.target.style.cursor = 'pointer' // 鼠标移入时变为手型光标
              },
              mouseleave: (event) => {
                event.target.style.cursor = 'default' // 鼠标移出时恢复为默认光标
              }
            }
          },
          column.title
        ), // 显示标题
        h(
          Poptip,
          {
            placement: 'bottom',
            width: 'auto',
            trigger: 'click',
            transfer: true
          },
          {
            default: () =>
              h(
                'span',
                {
                  style: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    cursor: 'pointer' // 确保 Poptip 触发区域的光标样式为手型
                  }
                },
                [
                  h('i', {
                    class: 'ivu-icon ivu-icon-ios-funnel',
                    style: {
                      fontSize: '14px',
                      color: '#B9BCCD'
                    }
                  })
                ]
              ),
            content: () =>
              h('div', { style: { display: 'flex', flexDirection: 'column', padding: '8px' } }, [
                h(
                  Input,
                  {
                    placeholder: '请输入',
                    type: 'number',
                    style: { width: '110px', minWidth: '40px' },
                    onInput: (e) => {
                      console.log('Input value:', e)
                    }
                  },
                  {
                    suffix: () =>
                      h(
                        'span',
                        {
                          style: {
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            height: '100%',
                            fontSize: '14px'
                          }
                        },
                        [h('span', '≥')]
                      )
                  }
                )
              ])
          }
        )
      ])
    }
}

解释说明

如果觉得h函数看起来很抽象，可以让gpt转成普通的vue代码，改好后，再转转成h函数的写法。重要的是本质，这都是两种不同展现和表现而已。

• renderHeader: 自定义列头的渲染方法。在这里我们通过 Flex 布局将标题和筛选图标组合在一起。
• Poptip: 用于显示筛选输入框的弹出提示组件。通过点击触发弹出，并提供筛选输入区域。
• Input: 用于输入筛选条件的组件。可以根据需要调整其样式和行为。

这里只做了一个大于等于条件的自定义筛选，要支持其他更多条件，只需要按照以上demo，使用h函数继续丰富对应的内容即可。
transfer: true
transfer
将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果。
如果不添加，会无法触发点击事件。

https://doufei.eu.org/2024/09/19/js/view-ui-plus%20iView%20Vue%203%20table%20%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BE%93%E5%85%A5%E7%AD%9B%E9%80%89%E6%9D%A1%E4%BB%B6/