Vue + jquery 实现表格指定列的文字收缩

效果很简单，可是写起来真的不容易，由于Vue对于没有React这种前端框架经验的人是不友好的
（少吐槽，多工做，省下时间出去hi）

先说一下我走过的弯路：我之间想经过 v-if 指令去操做这一列
代码是这样的：

<el-table-column width="250" align="center" label="比较基准">
  <template scope="scope">
    <span v-if="isAllTxt">{{getShortStr(scope.row.benchmark)}}</span>
    <span v-else>{{scope.row.benchmark}}</span>
    <i @click="changeTxt" style="margin-left:8px;color: #20a0ff;" class="el-icon-more"></i>
  </template> 
</el-table-column>

changeTxt 方法去改变 isAllTxt这个boolean 从而达到控制长短文字的显示

额，而后每次点击任意一行，这一列全部的文字都改变了
呃呃呃，这样产品绝对不会答应的，你觉得是上课全体起立么？？？

好，咱们用原来jquery时代开发的经验，在点击事件中传入 $(this) ，手动改dom
（前提是项目配置了jquery，请转头看：http://www.javashuo.com/article/p-muaxljcd-hk.html，上去，本身动。哦不，本身动手把它配好）
changeTxt($(this))

changeTxt(ref) {
    ref.text(XXX);
}

结果固然是错误：

那底下就有同窗说是否是jquery导错了？？？
固然也不是，这里的 this 并非 dom 的 this，是vue的vm对象，不信的能够在方法中用jquery的 $ 试一下，并非jquery的锅。

那又有爱思考的小伙伴说我用直接用 this 能够么 ？
changeTxt(this)

获得的并非当前元素的对象，这条路又不通。

那vue中是怎么获得元素的对象的呢？？？
给元素定义 ref

<span ref="txt">{{getShortStr(scope.row.benchmark)}}</span>

方法中经过 this.$refs['txt'].text(XXX) 改变dom，嗯？

引用返回的是什么 ？？？ 无法操做啊 ，并且返回的这个标签是表格最后一行的数据，哇，乱七八糟，爆炸。

无奈，只能经过最笨的方法，给咱们的 span 定义 id ，并且是不一样的 id ,用 jquery 获取 id 对应的元素

<el-table-column width="250" align="center" label="比较基准"> 
  <template scope="scope">
     <span :id="scope.row.id">{{getShortStr(scope.row.benchmark)}}</span>
    <i v-if="scope.row.benchmark.length>20" @click="changeTxt(scope.row.benchmark,scope.row.id)" style="margin-left:8px;color: #20a0ff;" class="el-icon-more">
    </i>
  </template>
</el-table-column>

// changeTxt方法：
   changeTxt(txt,id) {
      this.isAllTxt = !this.isAllTxt;
      if(this.isAllTxt){
        $('#'+id).text(txt);
      }else{
        $('#'+id).text(this.getShortStr(txt));
      }
    }

// getShortStr 方法
getShortStr(txt_origin) {
  if(txt_origin.length > 20){
    return txt_origin.substring(0,20);
  }else{
    return txt_origin;
  }
}

搞定是搞定了，可是 jquery 和 vue 的风格是不同的，混用体验并非很好，有好的方法请必定留言告诉我，一定送上一句 谢谢 ！！！