技術標籤：vuevue.jsjavascript

部分內容放在某欄位中，滑鼠懸停時展示

內容包含多個屬性值需要換行展示

 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)])
              ])
            ])
          }
        })
 

實現效果