vue+ant design table表格的需求实现,需求如下

1.单元格可以根据后端返回数据变换背景颜色,改变样式

2.在单元格内加入复制按钮,并且可以进行复制功能

3.可以进行点击a标签链接进行跳转

4.防止内容太长,table单元格显示不全,所有链接单元格需要有悬浮显示内容效果(有个小bug,在这里显示的时候是悬浮弹窗中显示一个table,然后这个table的单元格再有悬浮显示内容效果,就会出现一种情况,当我放在table单元格的悬浮值上时,我的table悬浮弹窗就关上了。。。待解决。。。)

table的column如下

      columns: [
        {
          title: 'name',
          dataIndex: 'name',
          key: 'name',
          width: 80,
          ellipsis: true,
          customRender: (value, row, index) => {
            return {
              children: value,
              attrs: {
                style: `background-color: ${row.color};text-align: left;` // 使用颜色字段的值作为背景颜色
              }
            }
          }
        },
        {
          title: 'title',
          dataIndex: 'title',
          key: 'title',
          ellipsis: true,
          customRender: (text, row, index) => {
            const handleCopy = () => {
              //创建input标签
              var input = document.createElement('input')
              //将input的值设置为需要复制的内容
              input.value = text
              //添加input标签
              document.body.appendChild(input)
              //选中input标签
              input.select()
              //执行复制
              document.execCommand('copy')
              //成功提示信息
              this.$message.success('复制成功!')
              //移除input标签
              document.body.removeChild(input)
            }
              return (
                <div style={{ backgroundColor: row.color, textAlign: 'left' }}>
                  <a-icon type="copy" onClick={handleCopy}></a-icon>
                  <a-tooltip title={text} placement="topLeft">
                    <a
                      href={row.Url}
                      style={{
                        color: 'rgb(5 99 193)',
                        textDecoration: 'underline',
                        marginLeft: '10px'
                      }}
                      target="_blank"
                    >
                      {text}
                    </a>
                  </a-tooltip>
                </div>
              )
          }
        }
      ], 

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐