鍍金池/ 問(wèn)答/HTML/ iview表格內(nèi)容，設(shè)置省略后如何顯示title（鼠標(biāo)滑過(guò)顯示文本）

iview表格內(nèi)容，設(shè)置省略后如何顯示title（鼠標(biāo)滑過(guò)顯示文本）

我在定義表格內(nèi)容時(shí)，使用了ellipsis關(guān)鍵詞，使文字溢出后顯示省略號(hào)，這個(gè)時(shí)候如何實(shí)現(xiàn)鼠標(biāo)移入顯示全部文字呢？title不知道加在哪里。（css能實(shí)現(xiàn)的話我都不犯愁的。。。）
部分表格內(nèi)容配置

  {
    title: '創(chuàng)建人',
    key: 'creatorName',
    ellipsis: true,
    width: '60',
    align: 'center'
  },

————————————————————————————————————
感謝這位兄臺(tái)提供render函數(shù)思路~

順便問(wèn)一下，在render函數(shù)里寫(xiě)的點(diǎn)擊事件，如何防止冒泡？
標(biāo)簽中直接@click.prevent.stop=""就可以了，那么render呢？
附上代碼

{
    title: '操作',
    width: '70',
    align: 'center',
    render: (h, params) => {
      return h('a', {
        on: {
          click: () => {
            this.removeItemContent(params.row.id);
          }
        }
      }, '移除');
    }
  },
回答
編輯回答
負(fù)我心

使用render函數(shù)

{
    title: '創(chuàng)建人',
    key: 'creatorName',
    width: '60',
    align: 'center',
    render: (h, params) => {
      return h('div', [
         h('span', {
             style: {
                 display: 'inline-block',
                 width: '100%',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap'
             },
             domProps: {
                 title: params.row.creatorName
             }
         }, params.row.creatorName)
     ]);
         
   }
}

至于冒泡的話，直接原生JS就可以了；

on: {
    click: (e) => {
        e.stopPropagation();
        this.removeItemContent(params.row.id);
    }
}
2018年3月24日 08:18