封装一个每列带有search的表格

本是古典何须时尚 2022-05-17 06:23 243阅读 0赞

利用element ui 的自定义的头部实现，效果：  
![这里写图片描述][70]  
代码：

固定前两列  
`:render-header='addSearch'` 自定义头部  
在methods中显示：

addSearch (h, {column}) {
          let inputValue = {}
          return h('Input', {
            props: {
              placeholder: 'Search' + ' ' + column.label,
              icon: 'ios-search-strong'
            },
            style: {
              paddingRight: '5px'
            },
            on: {
              input: val => {
                inputValue = val
                if (!inputValue) {
                  this.vaildInputValue(column.label, inputValue)
                }
              },
              class: 'ivu-input-icon',
              'on-click': () => {
                this.vaildInputValue(column.label, inputValue)
              },
              'on-enter': () => {
                console.log('enter')
                this.vaildInputValue(column.label, inputValue)
              }
            }
          })
        },

render JS 渲染  
相当于动态生成DOM元素，还可以给DOM元素添加事件，在jQuery中是createElement 来动态生成DOM元素。  
`vaildInputValue` 函数是判断用户的输入

vaildInputValue (label, inputValue) {
          if (!inputValue) {
            this.$set(this.search, label, '')
            this.sendSearchVal()
            return
          }
          this.$set(this.search, label, inputValue)
          this.sendSearchVal()
        },

给每一列的数据添加搜索的对象数据，默认的是空，如果发生改变就会改变search数据。

[70]: /images/20220517/bac4e047a50d41adb6a22f5f30cde9da.png