iview table点击单元格事件

  1. 点击事件
  on: {
    click: () => {
           this.handleShow(params.row)      //点击事件
         }
  }
  1. title设置
  domProps: {
               title: params.row.noticeTitle    //添加title属性
  },
  1. 过长部分截取显示省略号
 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)
         ])
       }
     }
]

显示:
iview table点击单元格事件_第1张图片

你可能感兴趣的:(iview)