iview点击表格内容触发事件

最新推荐文章于 2023-10-18 18:40:17 发布

HebyH_

最新推荐文章于 2023-10-18 18:40:17 发布

阅读量917

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/m0_45159572/article/details/120716870

版权

本文探讨了一种定制表格的高级展示方式，聚焦于关键字段如名称、用户和创建时间，通过交互设计提供详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 customFeedListColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('a', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  color: 'rgb(46, 86, 175)',
                  fontSize: '13px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  display: 'block'     //设置样式，超过文字省略号显示
                  //cursor: 'auto'   //设置鼠标样式
                },
                on: {
                  click: () => {
                    if ( this.showDetailsModal === false){
                      this.selectedRowName = params.row.name
                      this.clickedRowId = params.row.id
                      this.clickedRow = params.row
                    }
                    this.showDetailsModal = true
                  }
                }
              }, params.row.name)
            ])
          }
        },
     
        {
          title: '用户',
          key: 'userName',
          align: 'center'
        },
        {
          title: '生成时间',
          key: 'createTime',
          align: 'center'
        }

      ],//表格表头