iview ui里面 table表格title提示和气泡提示_iview的table的ellipsis的使用(1)-CSDN博客

本文链接：https://blog.csdn.net/2401_87289141/article/details/142427819

mounted() {
this.initTableColumn(‘tableColumn’)
},
methods: {
initTableColumn(columnName) {
// 提示一：title提示
for (let i = 0; i < this[columnName].length; i++) {
if (!this[columnName][i].render) {
this. $se t (t hi s [co l u mn N am e] [i],^{'} e ll i p s i s^{'}, t r u e) t hi s .$ set(this[columnName][i], ‘render’, (h, params) => {
return h(‘span’, {attrs: {title: params.row[params.column.key]}}, params.row[params.column.key])
})
}
}

//  title提示
for (let i = 0; i < this[columnName].length; i++) {
  if (!this[columnName][i].render) {
    this.$set(this[columnName][i], 'render', (h, params) => {
      return h('div', [
        h('span', {
          style: {
            display: 'inline-block',
            width: '100%',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          },
          domProps: {
            title: params.row[params.column.key]
          }
        }, params.row[params.column.key])
      ])
    })
  }
}

// 提示二：气泡提示
for (let i = 0; i < this[columnName].length; i++) {
  if (!this[columnName][i].render) {
    this.$set(this[columnName][i], 'ellipsis', true)
    this.$set(this[columnName][i], 'render', (h, params) => {
      return h('Tooltip', {
        props: { placement: 'top' }
      }, [
        params.row[params.column.key],
        h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, params.row[params.column.key])
      ])
    })
  }
}

}
}


 


![](https://img-blog.csdnimg.cn/20200104093905475.png)


 


**①：最原始的超出后省略.., title显示：**

{title: ‘录音名称’,key: ‘recName’,width: 260,align: ‘center’,
// render: (h, params) => {
// return h(‘div’, [
// h(‘span’, {
// style: {
// display: ‘inline-block’,
// width: ‘100%’,
// overflow: ‘hidden’,
// textOverflow: ‘ellipsis’,
// whiteSpace: ‘nowrap’,
// cursor: ‘pointer’,
// },
// domProps: {
// title: params.row.recName
// }
// }, params.row.recName)
// ]);
// }
}


 


**②：iview的 Tooltip显示，但是省略号不好处理，可以没有省略。。。，直接超出的部分不显示： ellipsis: true, //超出长度时用...显示**

{title: ‘录音名称’,key: ‘recName’,width: 260,align: ‘center’,

                    // render: (h, params) => {
                    //     return h('Tooltip', {
                    //     props: {
                    //         placement: 'top'
                    //     }
                    //     }, [
                    //         params.row.recName,
                    //         h('span', {
                    //         slot: 'content',             //slot属性
                    //         style: {
                    //             whiteSpace: 'normal',
                    //             wordBreak: 'break-all'
                    //         }
                    //         }, params.row.recName)
                    //     ])
                    // }


 


####  方法二、还有一个最简单的方法：tooltip:"false"