el-table表格中文本溢出隐藏用省略号代替并且点击显示全部

依然是工作中遇到的问题，记录下来~
万一哪个小可爱碰到了同样的需求，可以做个参考哦~
其实element-UI中有一个叫Popover 弹出框的也解决这个问题，但是！！！我写完他说他想要的是在原本的表格中实现！！如果你们的领导事情没那么多我强烈建议你用element-UI实现！

效果图

我这个是自己写的，虽然实现了，但我感觉有点蠢。。。

思路

1，这个文本溢出用省略号代替很简单，就是给它加个三元表达式判断一下是否超过了你想要的长度，我这里写的是11，如果超过了就用slice方法给它截取然后拼上省略号，如果没超过就让它正常显示
2，点击在原有的表格中显示全部的实现我是在点击的时候把下标赋值给isShow，然后用了v-if判断isShow是否等于该行的下标酱紫

代码

HTML部分

<div class="box">
      <el-table :data="sj" border>
        <el-table-column label="全句">
          <template slot-scope="scope">
            <span @click="show(scope.$index)" v-if="isShow !== scope.$index">{{scope.row.a.length > 11 ? scope.row.a.slice(0,10)+'...':scope.row.a}}span>
            <span v-else>{{scope.row.a}}span>
          template>
        el-table-column>
        <el-table-column label="第一句" prop="b">el-table-column>
        <el-table-column label="第二句" prop="c">el-table-column>
      el-table>
    div>

js部分

export default {
  data(){
    return {
      sj: [{a:"昨夜秋风凋碧树,独上高楼,望尽天涯路",b:"独上高楼",c:"望尽天涯路"}],
      isShow: null
    }
  },
   methods: {
    show(i){
      this.isShow = i
    }
   
  }
}
</script>