element-table-column表格内容展开收起，自动展示三行

需求：element-table-column表格内容展示三行，点击展开所有内容，点击收起展示三行+展开按钮，鼠标悬停之后展示详情

参考文章：https://segmentfault.com/a/1190000041558177

先准备一个计算字符数的函数

// 计算字符数
byteCount(str) {
  const count = (str && str.replace(/[^\x00-\xff]/g, "xx").length) || 0;
  return count;
},

对从接口中获取到的数据进行处理，拿到list之后for循环遍历，这里字符数大于270就显示展开按钮
（这个数字需要自己慢慢调试），添加一个新的属性spread控制是否展开，注意要在加上之后再传给前端tabledata进行渲染。

async operateLogList() {
      try {
        var data ={
        referenceId: this.$route.query.row.id,
        pageNum: this.pageNum, //当前页
        pageSize: this.pageSize//查询个数
        }
        const res = await operateLogList(data);
        if (res.returnCode == "00000") {
          var list=res.data.rows;
          console.log(list,'list');
          for (let i=0;i<list.length;i++){
            if(this.byteCount(list[i].opreateDetail)>270){
              list[i].spread=false;
              console.log(123456789)
          }
        }
          this.tableData=list;
          console.log(this.tableData,666)
          this.total=res.data.total;//总数
        }else{
          this.$message({
            message: res.returnMessage,
            type: 'error'
          })
        }
      } catch (err) {
        this.$message({
            message: "服务异常, 请稍后重试!!!",
            type: 'error'
          })
      }
    },

展开收起标签的写法：

注：1.这里使用了template插槽：

<template slot-scope="scope">
    <div class="spread-box" :style="{'-webkit-line-clamp':scope.row.spread ? '':3}">
        {{scope.row.opreateDetail}}
    </div>
              
    <div v-show="scope.row.spread==false" @click="spreadText(scope.row)" class="spread-btn">
        <el-button type="text">展开<el-icon class="el-icon-arrow-down"></el-icon></el-button>
    </div>
    <div v-show="scope.row.spread==true" @click="spreadText(scope.row)" class="spread-btn">
        <el-button type="text">收起<el-icon class="el-icon-arrow-up"></el-icon></el-button>
    </div>
</template>  

理解slot-scope="scope"属性：

（1）slot-scope="scope"本质上就是一个插槽，简单说就是先在 el-table 中占一个位置，然后再等待操作往里面填值即可；

（2）在scope.row.operateDetail语句中，row 是 scope 的内置属性，可以理解为给 label="操作详情" 列中的每个 row 中添加 tableData 数组所有对象中的 operateDetail属性;

（3）此时的所占位置的 scope 并不是代表着 table，可以将scope.row理解为一个整体，从而来存放 tableData 所有数组对象中的 address 属性值；

总结：其中的slot-scope的一个作用就是获取当前所在元素的数据，令slot-scope值为scope，那么由scope.row就可以得到数据了。

element-ui中<template slot-scope="scope">的用法学习这两篇文章：

https://blog.csdn.net/Shaojun_jita/article/details/107390442

https://blog.csdn.net/weixin_43405300/article/details/124655802

2.需要折叠的文字标签写法
  样式逻辑主要就是控制-webkit-line-clamp的行数，设置数字就是显示对应行数，不设置就是全部展开。

<div class="spread-box" :style="{'-webkit-line-clamp':scope.row.spread ? '':3}">
    {{scope.row.opreateDetail}}
</div>

3.展开收起逻辑对应的方法

spreadText(obj){
    obj.spread=!obj.spread;
}

4.对应的css

.spread-box{
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box;
    -webkit-box-orient: vertical
  }
  .spread-btn{
    text-align: center;
    vertical-align: middle;
    color:#5995ef;
    // font-size: 14px;
  }

5.鼠标悬停展示详情

利用el-tooltip组件：这里content是固定的，展示提示的内容。

<el-tooltip :content="scope.row.opreateDetail" placement="top">
    <div class="spread-box" :style="{'-webkit-line-clamp':scope.row.spread ? '':3}">
        {{scope.row.opreateDetail}}
    </div>
</el-tooltip>

注意：设置el-tooltip宽度问题，新写一个<style>，修改tooltip样式即可，但是注意不要写在同页面的scoped中可能会不生效！！

<style>
  .el-tooltip__popper {
    max-width: 400px;
    line-height: 180%;
  }
</style>

完整代码：

<el-table-column  prop="opreateDetail" label="操作详情">
    <template slot-scope="scope">
        <el-tooltip :content="scope.row.opreateDetail" placement="top">
            <div class="spread-box" :style="{'-webkit-line-clamp':scope.row.spread ? '':3}">
                {{scope.row.opreateDetail}}
            </div>
        </el-tooltip>
        <div v-show="scope.row.spread==false" @click="spreadText(scope.row)" class="spread-btn">
            <el-button type="text">展开<el-icon class="el-icon-arrow-down"></el-icon></el-button>
        </div>
        <div v-show="scope.row.spread==true" @click="spreadText(scope.row)" class="spread-btn">
            <el-button type="text">收起<el-icon class="el-icon-arrow-up"></el-icon></el-button>
        </div>
    </template>  
</el-table-column>