iview 表格render --Tooltip 换行

最新推荐文章于 2023-08-14 11:13:59 发布

Ailurophile_Lc

最新推荐文章于 2023-08-14 11:13:59 发布

阅读量991

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Rex9910/article/details/114138312

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

部分内容放在某字段中，鼠标悬停时展示

内容包含多个属性值需要换行展示

 columns.push({
          title: '状态',
          key: 'stateName',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let text_ = '',
              color = ''
            if (params.row.state == 1) {
              text_ = '正常'
              color = 'blue'
            } else if (params.row.state == 2) {
              text_ = '延期'
              color = 'red'
            } else if (params.row.state == 3) {
              text_ = '暂停'
              color = 'rgb(255, 153, 0)'
            } else {
              text_ = '结项'
              color = 'green'
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [
                h(
                  "p",
                  {
                    style: {
                      color: color,
                    },
                  },
                  text_
                )
                //Tooltip 的slot 用法，内容自定义换行
                , h('span', {
                  slot: 'content',
                }, [h('p', "完成百分比:" + params.row.otherMap.percentComplete), h('p', "项目阶段:" + 123)])
              ])
            ])
          }
        })