iview中Table组件表格一行内容溢出部分使用...（省略号）来显示

在这里推荐2种方法：

方法一：可以直接打开ellipsis属性，但是这样写并不能实现鼠标悬浮，显示所有的内容，往往我们使用这样只是由于空间小想要方便一页展示，不想使用横向的滚动条！

 listColumns: [
    {
      title: "所属省份",
      key: "provinceName",
      align: "center",
      // 可以直接打开ellipsis属性，但是这样写并不能实现鼠标悬浮
      ellipsis: true,
      width: 100
    },
    {
      title: "所属地市",
      key: "cityName",
      align: "center",
      width: 100,
    }]

方法二：使用render函数

{
    title: '创建人',
    key: 'creatorName',
    width: '60',
    align: 'center',
    render: (h, params) => {
      return h('div', [
         h('span', {
             style: {
                 display: 'inline-block',
                 width: '100%',
                 overflow: 'hidden',
                 // 在此设置溢出部分...显示
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap'
             },
             // 设置鼠标悬浮，显示title，内容为对应的数据在此为creatorName，同数据项里面的key值
             domProps: {
                 title: params.row.creatorName
             }
         }, params.row.creatorName)
     ]);
         
   }
}

示例如下：

在此基础上还需要做出优化，因为这样实现了鼠标悬浮展示，但是如果我们要想复制表格的内容，在现有的基础上并不能实现，只能复制省略号...前的文字内容，因此我们可以采用iview的Poptip组件，如下

{
          title: "工单名称",
          key: "taskName",
          align: "center",
          width: 180,
          render: (h, params) => {
            return h('div', [
            // 显示的位置上方
              h('Tooltip', {
                props: { placement: 'top' ,transfer: true}
              }, [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100px',
                    overflow: 'hidden',
                    // 同样在这里隐藏溢出内容
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                  },
                }, params.row.taskName),
                // 显示的内容
                h('span', {
                  slot: 'content',
                  style: { whiteSpace: 'normal', wordBreak: 'break-all' }
                },params.row.taskName)
              ])
            ])
          }
        },

 示例：

 总结：根据不同的需求采用不同的方式

补充:(如果是单纯的css实现)

css样式：

        1.设置一个设置一个width，相当于超过多长之后溢出的用省略号代替

        2.给元素设置overflow：hidden的属性，溢出的部分不可见

        3.给元素设置white-space：nowrap的属性，规定段落内的文本不进行换行

        4.设置text-overflow：ellipsis属性，将溢出的部分用省略号代替

        5.给元素设置title属性，将原本的全部内容赋给title，可以使用鼠标悬浮查看完整内容