iview ui里面 table表格title提示和气泡提示_iview的table的ellipsis的使用

2401_87289148

于 2024-09-22 01:29:45 发布

阅读量290

点赞数 4

文章标签： view design 前端 javascript

本文链接：https://blog.csdn.net/2401_87289148/article/details/142427832

版权

方法一、

<Table border :columns="tableColumn" :data="tableData"></Table>
 
mounted() {
    this.initTableColumn('tableColumn')
},
methods: {
  initTableColumn(columnName) {
    //  提示一：title提示
    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('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])
          ])
        })
      }
    }
 
  }
}

①：最原始的超出后省略…, 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', {