ivew组件table头通过renderHeader函数添加可选项以及改变列值以及table中render函数的使用

最新推荐文章于 2025-05-04 19:00:01 发布

梨子ππ

最新推荐文章于 2025-05-04 19:00:01 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue vue.js html es6 javascript

本文链接：https://blog.csdn.net/lch1399038292/article/details/117250021

本文介绍了如何在ivew组件的table中利用renderHeader函数为表头添加可选项，并改变列值。此外，还展示了如何在表格中添加操作按钮，以及结合Poptip组件进行提示功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、table头通过renderHeader函数添加可选项以及改变列值

 { key: 'UrlSys',
          title: '测试1',
          tooltip: true,
          renderHeader: (h, params) => {
            return this.renderSelectTableColumn(h, params)
          }
        }

 renderSelectTableColumn (h, params) {
      let edit
      let options = this.typeList.map(v => {
        return h('Option', {
          props: {
            value: v.value
          }
        }, v.value)
      })
      edit = [h('Select', {
        props: {
          value: params.column.title,
          placement: 'bottom-end',
          transfer: true
        },
        class: { 'select-style': true },
        style: { marginLeft: '-8px', marginRight: '8px' },
        on: {
          input: (val) => {
            params.column.title = val
            if (this.getKey(val)) {
              params.column.key = this.getKey(val)
            } else {
              // this.msgInfo('error', val + '列不存在,请检查！', true)
            }
          }
        }
      }, options)]
      return h('div', [edit])
    }

2、添加操作按钮

 { key: 'action',
          title: '测试',
          // fixed: 'right',
          minWidth: 30,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '8px' },
                on: {
                  click: () => {
                    this.getJson(params.index)
                  }
                }
              }, '查看')
            ])
          }
        }

3、使用Poptip

第一种方式：

return h('div', [
         h('Poptip', {
           props: {
            transfer: true
               },
               on: {
                   'on-ok': () => {
                     this.editTableIndex = -1
                     // 调用删除方法
                     this.deleteAccount(params.index)
                  },
                 'on-cancel': () => {
                   }
               }
              }, [
                h('span', {
                   props: { size: 'small', type: 'warning' },
                   on: {
                    click: () => {
                     }
                   }
                }, params.column.title)
               ]
              )
            ])
          }
第二种方式：
             return h('div', [
              h('span', {
                style: { fontWeight: 'bold' }
              }, params.column.title
              ),
               h(
                'Poptip',
                {
                   props: {
                    trigger: 'hover',
                    placement: 'bottom-end',
                     content: params.column.title + 'br/' + params.column.title,
                    transfer: true
                  },
                   style: {
                    float: 'right'
                   }
                 },
                 [
                   h('Icon', {
                     props: {
                       type: 'ios-information-circle',
                       size: '20',
                       color: '#03f'
                    },
                     style: {
                       float: 'right',
                       display: params.column.title ? 'inline-block' : 'none'
                     }
                   })
                ]
               )
             ])