表格中某项显示文字过多处理方法

一、最终效果：

鼠标移到课程简介上方

二、实现步骤：

先限制数据（record）的长度并将多余的部分用省略号替代，鼠标移到数据上方弹出气泡展示全部数据

  const columns = [
      {
        title: '序号',
        key: (text, record, index) => index,
        render: (text, record, index) => {
          const {currentPage, pageSize} = pagination;
          return (currentPage - 1) * pageSize + index + 1;
        },
        width: 80,
        align: 'center',
      },
      {
        title: '课程名称',
        dataIndex: 'courseName',
        key:'courseName',
      },
      {
        title: '课程代码',
        dataIndex: 'courseCode',
        key: 'courseCode',
      //  width:120,
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
      },
      {
        title: '课程简介',
        dataIndex: 'introduction',
        key:'introduction',
        render: (record = "") => {
 
          let data = record
          if (data.length > 11) {
            data = data.substring(0, 10)
            data += "......"
          }
          return (
            <Popover
              content={record}
              autoAdjustOverflow
              mouseEnterDelay={0.2}
              placement='top'
            >
              {data}
            </Popover>
          )
        }
      },
      {
         title: '操作',
         key: 'action',
       //  width:140,
         dataIndex: 'action',
         align: 'center',
         render: (text, record) => (
           this.createAction(text, record)
         ),
       }
    ];