【hui】h-table的表头自定义排序图标

湛海不过深蓝

已于 2024-06-05 15:58:24 修改

阅读量82

点赞数 1

分类专栏： hui 文章标签：前端 javascript html

于 2024-06-03 14:17:47 首次发布

本文链接：https://blog.csdn.net/bbt953/article/details/139413578

版权

hui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

title: '数字',
  key: "hotCount",
  width: 120,
  renderHeader: (h, { column, index }) => {
    return h(
      'span',
      [
        '数字',    
        h(
          'span',
          {
            class: 'icon-wrap',
            style: {
              display: 'inline-block',
              width: '12px',
            },
            on: {
              click: () => {
                this.toggleSort('up')
              }
            },
          },
          [
            h(
              'i',
              {
                class: ['iconfont icon-array-up', { isActive: this.isActive['up'] }],
                props: {
                  color: '#C3CBD6',
                },
                style: {
                  cursor: 'pointer',
                  color: this.isActive['up'] ? '#037DF3' : '#C3CBD6',
                },
              },
            )
          ],
        ),
        h(
          'span',
          {
            class: 'icon-wrap',
            on: {
              click: () => {
                this.toggleSort('down')
              }
            },
          },
          [
            h(
              'i',
              {
                class: ['iconfont icon-array-down', { isActive: this.isActive['down'] }],
                props: {
                  color: '#C3CBD6',
                },
                style: {
                  verticalAlign: 'middle',
                  cursor: 'pointer',
                  color: this.isActive['down'] ? '#037DF3' : '#C3CBD6',
                },
              }
            ),
          ]
        )         
      ],
    )
  }

toggleSort(direction) {  
  if(!['up', 'down'].includes(direction)) {
    return
  }
  this.isActive[direction] = !this.isActive[direction]
  this.isActive[direction === 'up' ? 'down' : 'up'] = false
  this.handleSort()
},  
handleSort() {
  this.sort = this.isActive.up ? 0 : (this.isActive.down ? 1 : undefined)
  this.updateParams()
},