iview table点击单元格事件

最新推荐文章于 2024-04-02 14:45:30 发布

原创最新推荐文章于 2024-04-02 14:45:30 发布 · 6.1k 阅读

3 ·

CC 4.0 BY-SA版权

iview 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种优化表格组件显示的方法，通过使用省略号和title属性处理过长文本，同时保持了良好的用户体验和美观性。文章详细解释了如何在表格单元格中应用样式，如overflow、textOverflow和whiteSpace，以确保当文本超出单元格宽度时，能够优雅地显示省略号，并通过title属性提供完整文本的提示。

点击事件

  on: {
    click: () => {
           this.handleShow(params.row)      //点击事件
         }
  }

title设置

  domProps: {
               title: params.row.noticeTitle    //添加title属性
  },

过长部分截取显示省略号

 style: {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        display: 'block'     //设置样式，超过文字省略号显示
 },

具体代码：

column：[
	{
      title: '标题',
       key: 'noticeTitle',
       tooltip: true,
       sortable: 'custom',
       align: 'left',
       render: (h, params) => {
         return h('div', [
           h('a', {
             props: {
               type: 'primary',
               size: 'small'
             },
             style: {
               marginRight: '5px',
               color: '#515a6e',
               fontSize: '13px',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
               display: 'block'     //设置样式，超过文字省略号显示
               //cursor: 'auto'   //设置鼠标样式
             },
             domProps: {
               title: params.row.noticeTitle    //添加title属性
             },
             on: {
               click: () => {
                 this.handleShow(params.row)      //点击事件
               }
             }
           }, params.row.noticeTitle)
         ])
       }
     }
]

显示：
在这里插入图片描述