element ui表格内容过长省略显示，点击单元格展开全部内容

element ui表格内容过长省略显示

​ 老板有个需求是希望能够对数据集的内容进行一个展示，当然这种功能用表格轻轻松松就解决啦，但是问题在于数据集中一条数据的内容通常都比较长，这就导致表格的一行特别的高，十分不好看，所以希望能够将表格的内容用省略号显示，当点击当前单元格时候再显示完整的表格内容。

​ 实现上述需求有以下几种思路：1.利用element ui提供的:show-overflow-tooltip="true"属性来折叠，利用tooltip来进行内容的完整展示；2.利用:formatter="stateFormat"来确定显示多少字符。

show-overflow-tooltip

​ Element-ui提供了Table-column Attributes的show-overflow-tooltip属性，使用时只需要在需要设置的列中添加该属性即可。

显示效果如下：

但是这也太丑了吧？？？哪有这样一大坨直接tooltip显示的啊？若要修改tooltip的样式可以参考 element ui 中table 单列 超出部分显示省略号，这明显不符合我的要求，我希望的是表格内容过长用省略号显示，但是通过点击表格能够实现内容的展开和重新的省略。

formatter

​ Element-ui同时还提供了Table-column Attributes的formatterp属性，它也能够帮助我们隐藏过长的表格内容

比如我的代码是：

<el-table-column prop="content" label="数据内容" align="center" :formatter="stateFormat"></el-table-column>

stateFormat(row, column, cellValue){
  // console.log(row);
  // console.log(column);
  // console.log(cellValue);
  if(row.flag){
    if (!cellValue) return '';
    if (cellValue.length > this.contentLength) {   // 超过contentLength长度的内容隐藏
      return cellValue.slice(0, this.contentLength) + '...';
    }
    return cellValue;
  }else{
    return cellValue;
  }
},

效果如下：

现在考虑的就是如何通过点击展开内容，这时候我注意到了一个方法 cell-click，官方描述的是 当某个单元格被点击时会触发，那么当我们点击数据内容的某个单元格的时候让内容全部展示出来是不是就可以了呢？

clickContent(row, column, cell, event){
  clickContent(row, column, cell, event){
    if(column.label === "数据内容"){  // 只有点击数据内容列时才会展开
      row.flag = !row.flag;  // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
    }
  }
}

然后效果就实现啦~