iview在Table表格中渲染Tooltip文字提示,使用render实现

        {
          title: '发送范围',
          key: 'sendRangeName',
          minWidth: 100,
          align: 'center',
          className: 'noticeConciseContent',
          render: (h, params) => {
            let texts = params.row.sendRangeName
            if (params.row.sendRangeName != null) {
              if (params.row.sendRangeName.length > 9) {
                texts = params.row.sendRangeName.slice(0, 9) + '...' // 进行数字截取
              } else {
                texts = params.row.sendRangeName
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.sendRangeName)
              ])
            ])
          }
        },

效果

iview在Table表格中渲染Tooltip文字提示,使用render实现_第1张图片

你可能感兴趣的:(iview页面技术)